サラウンド要素を拡大しないで要素を移動

Question

これは潜在的にばかげた質問として出てくるでしょうが、今はthisのように感じています。

このアンパサンドのサイズを変更して移動したいのですが、何かを行うたびに、その周囲のすべてを調整します。

基本的に、私はそれが大きく、ロゴの隣の中心に位置決めさ必要がありますが、それは私が望んでいないジャンボトロンとページ全体のサイズを増加し続けます。要約すると、この2番目のイメージから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);のようなものを使用する必要があります。