vertikale Ausrichtung funktioniert nicht müssen Schwimmereigenschaft verwenden

Ich versuche, die beiden Bilder vertikal innerhalb der Kopf div auszurichten und halten Sie jede auf der anderen Seite. Dies ist, was ich versucht habe:vertikale Ausrichtung funktioniert nicht müssen Schwimmereigenschaft verwenden

body, 
 
html { 
 
    height: 100%; 
 
    color: #666; 
 
    background: #f2f2f2; 
 
    font-family: sans-serif; 
 
    margin: 0px auto; 
 
    padding: 0px; 
 
} 
 

 
.main { 
 
    max-width: 1280px; 
 
    margin: 0 auto; 
 
} 
 

 
.head { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
.left { 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.right { 
 
    float: right; 
 
    width: 30%; 
 
    text-align: right; 
 
}

<div class="main"> 
 
    <div class="head"> 
 
    <div class="left"><img src="http://via.placeholder.com/200x55.png/c45" alt="Logo 1" title="" width="200px" /></div> 
 
    <div class="right"><img src="http://via.placeholder.com/200x55.png/s45" alt="Logo 2" title="" width="200px" /></div> 
 
    </div> 
 
    <div class="web-banner"> 
 
    <div class="img"> 
 
     <img src="http://via.placeholder.com/1280x550.png" width="1280px" height="550px" alt="main image" /> 
 
    </div> 
 
    <div class="title">the quick brown fox jumped over the lazy dog</div> 
 
    <div class="sub-title">the quick brown fox jumped over the lazy dog</div> 
 
    </div> 
 
</div>

Quelle

2017-08-23 Anonymous

'floating' Elemente * kann nicht * vertikal ausgerichtet sein ... Sie müssen andere Methoden verwenden - versuchen Sie zum Beispiel eine' flexbox' Lösung. .. – kukkuz

Fragen, die Debugging-Hilfe suchen, müssen den kürzesten Code enthalten, der notwendig ist, um sie ** in der Frage selbst zu reproduzieren. ** NB - ** Bitte missbrauchen Sie die Codeblöcke nicht, um diese Anforderung zu umgehen **. –

@kukkuz Es macht mir nichts aus, etwas wie flexbox zu verwenden, solange es meine Bilder am richtigen Ort hält und vertikal innerhalb des div ausgerichtet ist. –

das ist, was ich gefunden und es funktionierte mit 'display: flex' und 'align-self: center'

/* this div can be ignored, used for advisability only */  
 
div { 
 
    border: 1px dotted red; 
 
} 
 

 
.head { 
 
    width: 100%; 
 
    height: 100px; 
 
    display: flex; 
 
} 
 

 
.left { 
 
    max-height: 60px; 
 
    float: left; 
 
    width: 30%; 
 
    align-self: center; 
 
    margin-left: 60px; 
 
} 
 

 
.right { 
 
    max-height: 60px; 
 
    margin-left: auto; 
 
    margin-right: 60px; 
 
    float: right !important; 
 
    width: 30%; 
 
    text-align: right; 
 
    align-self: center; 
 
}

<div class="head"> 
 
    <div class="left"><img src="http://via.placeholder.com/200x60.png/c45" alt="Zebra Logo" title="logo 1" width="200px" /></div> 
 
    <div class="right"><img src="http://via.placeholder.com/200x60.png/s45" alt="Zebra Logo" title="logo 2" width="200px" /></div> 
 
</div>

Quelle

2017-08-23 21:29:52

vertikale Ausrichtung funktioniert nicht müssen Schwimmereigenschaft verwenden

Antwort

Verwandte Themen