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

Question

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

我想调整大小并移动这个＆符号，但每当我做任何事情时，它会调整周围的一切。

基本上，我需要它更大，并且位于徽标旁边的中心位置，但它不断增加了我不想要的超大尺寸和页面的整体尺寸。总结一下，我需要第一张图像中较大的“＆”符号来自第二张图像的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);之类的内容来移动元素的比例并将其放置在您想要的位置。