Float sonrası merkezi öğeleri hizalayın

Question

Mobil ilk ortam sorgularıyla bir web sitesi yapıyorum. Daha büyük bir cihaza (tablet) bindiğimde, .textcontainer'ı yüzmek zorunda kaldım, böylece görüntünün sağ tarafında hizalanacaktı.

Float, sayfamın ortasında içeriğimi dikey olarak hizalamak için çalıştı ancak görüntümü ve metin içeriğimi sayfanın ortasında yatay olarak nasıl ortalayacağımı anlayamadım.

Merkezi hizaya getirmek için .textcontainer öğesine% 8'lik bir kenar boşluğu ekledim, ancak sayfamın tüm içeriğini daha duyarlı olacak şekilde hizalamanın daha iyi bir yolu olup olmayacağını merak ediyorum ?

Ayrıca, bir float kullandığım için .mailicon görüntüsü artık sayfamın alt kısmında (dikey ve yatay) ortada değil ... Ortaya geri getirmem gerekiyor.

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

ve benim CSS: Burada

benim HTML

Bunu, üst verilen text-align kuralları alma uygulamaları (davanız .textcontainer olarak) çocuk elemana display:inline-block; kullanabilirsiniz

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

.

iPhone medya sorgusunu da koydum ve .textcontainer'u merkez hizalanmış hale getirdim.

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

Kodunuz (dikey hizalama) bilgisayarımda çalışmıyor görünüyor.

Bunu yapmak için jQ kullanabilirsiniz: dikey merkez hizalamak için

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

, Bunu genelde:

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