移动元素而不放大环绕元素

Question

这可能是一个愚蠢的问题，但我现在感觉就像this。

我想调整和移动这个 & 符号，但是每当我做任何事情时，它都会调整它周围的一切。

基本上，我需要它更大并位于徽标旁边的中心位置，但它会不断增加我不想要的 jumbotron 和页面的整体大小。总而言之，我需要第一张图像中较大的 & 号与第二张图像中的 jumobtron 大小相同。

下面是相关代码。

HTML：

<div class="col-sm-11">
   <img src="~/Images/Logo.png" id="CDPHPlogo" />
    <span class="ampersand">&</span>
    <span>Your Tabacco-Free Resource</span>
</div>
<div class="col-sm-1">
   <img src="~/Images/MenuButton.png" id="menuButton" />
</div>
<div class="jumbotron" id="homejumbo">
   <div class="container">      
     <h2></h2>       
   </div>
</div>

CSS：

#menuButton 
  {
   padding-top: 15px;
  }

 #CDPHPlogo 
   {
   }

.ampersand 
 {
  font-size: 140pt;
  color: white;
 }

Answer 1

使用 CSS 属性transform:;，因为它不会影响页面上的其他元素。这是一个不错的小指南。 https://css-tricks.com/almanac/properties/t/transform/

假设你想让它变大，你可以使用：

.ampersand {
  font-size: 140px;
  color: white; 
  transfrom: scale(1.25,1.25);
}

这将使大小增加 25%。使用transform: translate(); 垂直或水平移动元素。您可能需要使用 transform: scale(1.5,1.5) translateY(50px); 之类的东西来移动元素的比例并将其放置在您想要的位置。