zentrieren Objekte nach Float

Question

Ich baue eine Website mit einem Handy erste Medienabfragen. Sobald ich zu einem größeren Gerät (Tablet) kam, musste ich meinen .textcontainer schweben lassen, damit er auf der rechten Seite meines Bildes ausgerichtet wurde.

Der Float funktionierte, um meinen Inhalt vertikal in der Mitte der Seite auszurichten, aber ich konnte nicht herausfinden, wie ich mein Bild und meinen Text in der Mitte der Seite horizontal zentrieren sollte.

Ich habe einen Rand rechts von 8% zu meinem .textcontainer hinzugefügt, damit er zentriert aussieht, aber ich frage mich, ob es einen besseren Weg geben würde, meinen gesamten Inhalt in der Mitte der Seite auszurichten, der reaktionsfähiger wäre ?

Da ich einen Float verwendet habe, zentriert sich das .mailicon-Bild nicht mehr (vertikal und horizontal) unten auf meiner Seite ... Ich muss es in die Mitte zurückbringen.

Hier ist mein 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> 

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

Sie display:inline-block; zum Kinder-Elemente verwenden kann (in Ihrem Fall .textcontainer), die die text-align Regeln in Mutter gegeben bleibt .

Ich legte iPhone-Media-Abfrage auch und machte die .textcontainer, um ausgerichtet zu werden.

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

Ihr Code Arbeit scheint nicht auf meinem Computer (vertikal ausrichten).

können Sie jQ, dies zu tun:

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

Für vertikal Zentrum ausrichten, ich dies in der Regel tun:

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