浮動小数点の後に中心項目を整列する

Question

私はモバイルの最初のメディアクエリでウェブサイトを構築しています。一度大きなデバイス（タブレット）に着くと、.textコンテナをフロートしてイメージの右側に配置する必要がありました。

フロートはページの中央にコンテンツを垂直に配置するように機能しましたが、ページの中央に画像とテキストコンテンツを水平に中央に配置する方法がわかりませんでした。

私の.textcontainerにmargin-rightの8％を追加して中央揃えにしましたが、より反応性の高いページの中央にすべてのコンテンツを整列させる良い方法があるのだろうかと思います？

また、フロートを使用しているため、.mailiconイメージは、ページの下部に（垂直方向と水平方向に）中央にはなりません...私は中央に戻す必要があります。ここで

は私のHTMLです：

<div class="section section4"> 
     <img src="icons/ML-network.gif" alt="icon3"> 
     <div class="textcontainer"> 
     <h1>Ethereum</h1> 
     <p class="ultralight">A turing complete platform with numerous <br> pre-optimized smart contract templates. Backed by the security of Ethereum.</p> 
     </div> 
     <a href="mailto:contact@magicledger.com"><img class="mailicon" src="icons/email-icon%20color.png" alt="mail icon"></a> 
    </div> 

と私のCSS：

main img { 
     width: 30%; 
    } 
    .textcontainer { 
    float: right; 
    width: 50%; 
    margin-right: 8%; /* ADJUST BETTER... */ 
    } 
    main .section > * { 
    position: relative; 
    top: 50%; 
    transform: translate(0, -50%); 
} 
    main h1 { 
    text-align: left; 
    font-size: 1.8em; 
    margin-top: 0;  
    } 
    main p { 
    text-align: left; 
    margin: 0;  
    } 
    .section4 .mailicon { 
    clear: both; 
    width: 40px !important; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    } 

Answer 1

あなたが親に与えられたtext-alignルールを遵守いる（あなたのケースの.textcontainerで）子要素にdisplay:inline-block;を使用することができます。

iPhoneのメディアクエリも入れて、.textcontainerを中央揃えにしました。

img { 
 
    width: 30%; 
 
    float:left; 
 
} 
 
.clearfix{ 
 
clear:both; 
 
} 
 
.section{ 
 
    text-align:right; 
 
} 
 
.textcontainer { 
 
    width: 50%; 
 
    display:inline-block; 
 
    text-align:left; 
 
} 
 
main.section > * { 
 
    position: relative; 
 
    top: 50 %; 
 
    transform: translate(0, -50%); 
 
} 
 
main h1 { 
 
    text - align: left; 
 
    font - size: 1.8em; 
 
    margin - top: 0; 
 
} 
 
main p { 
 
    text-align: left; 
 
    margin: 0; 
 
} 
 
.section4.mailicon { 
 
    clear: both; 
 
    width: 40px!important; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 

 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 480px) 
 
    and (-webkit-min-device-pixel-ratio: 2) { 
 
    .section{ 
 
    text-align:center; 
 
    } 
 
}

<div class="section section4"> 
 
    <img src="icons/ML-network.gif" alt="icon3"> 
 
    <div class="clearfix"></div> 
 
    <div class="textcontainer"> 
 
    <h1>Ethereum</h1> 
 
    <p class="ultralight">A turing complete platform with numerous 
 
     <br>pre-optimized smart contract templates. Backed by the security of Ethereum.</p> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <a href="mailto:contact@magicledger.com"> 
 
    <img class="mailicon" src="icons/email-icon%20color.png" alt="mail icon"> 
 
    </a> 
 
</div>

Answer 2

あなたのコードは、（垂直揃え）自分のコンピュータ上で動作していないようです。

これを行うには、jQのを使用することができます。縦の中心を合わせるために

var conWidth = $(".section4").width(),imgWidth =$(".section4 > img").width(),textConWidth = $(".textcontainer").width() ; 
    $(".textcontainer").css("margin-right",(conWidth - imgWidth - textConWidth)/2); 

が、私は通常これを行う：

.someclass{ 
     display: table-cell; 
     vertical-align:middle; 
     width: 100px; 
     height: 100px; 
    }