在不擴大環繞元素的情況下移動元素

這是一個潛在的愚蠢問題，但我現在感覺像是this。在不擴大環繞元素的情況下移動元素

我想調整大小並移動此符號，但每當我做任何事情時，它都會調整它周圍的一切。

基本上，我需要變得更大和位於中心旁邊的標誌，但它一直增加的超大屏幕和網頁，我不想的整體規模。總結起來，我需要第一幅圖像中的較大的＆符號與第二幅圖像的尺寸相同。

下面是相關的代碼。

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; 
}

來源

2017-03-08 M. Straw

使用的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);之類的東西來移動縮放元素並將其放在您想要的位置。

來源

2017-03-08 17:22:40

這工作得很好！我完全在變換上空白！現在有沒有辦法在不失分辨率的情況下對其進行縮放，或者最好是使用更大的圖像，然後將其縮小？ –

@ M.Straw。這可能有幫助，請嘗試將圖像放入容器中，然後縮放容器，而不是圖像。 http://stackoverflow.com/questions/27556426/css3-scale-transform-preserve-image-quality –

變換，大部分工作。但是，當我仍然嘗試增加字體大小時，它會增加它的大小。我可以保持大小不變的大小嗎？ –

在不擴大環繞元素的情況下移動元素

回答

相關問題