Float Bilder links (haben sie nebeneinander) und vertikal zentriert, dann unter

Ich muss in der Lage sein, Bilder links (haben sie nebeneinander) und vertikal in der div, dann haben sie vertikal stapeln während sie im div zentriert bleiben, wenn das Fenster in der Größe geändert wird. Ich habe es so, dass es horizontal zentriert ist, und bleibt so, ich kann einfach nicht herausfinden, wie man es vertikal zentriert.Float Bilder links (haben sie nebeneinander) und vertikal zentriert, dann unter

Vielen Dank im Voraus!

Hier ist mein html:

.mainContainer { 
 
\t max-width:90%; 
 
\t background-color: #00a5bd; 
 
\t color: white; 
 
\t padding-top: 0 !important; 
 
\t min-height: 500px; 
 
\t margin: 0 auto; 
 
} 
 

 

 

 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
} 
 

 
.flex-item { 
 
    background: salmon; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: left; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
\t <title>Working HTML</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="mainContainer"> 
 
<ul class="flex-container"> 
 
    <li class="flex-item"><img src="http://placehold.it/273x138"></li> 
 
    <li class="flex-item"><img src="http://placehold.it/230x138"></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-03-24 J.Hope

Sie wollen, dass die beiden in der linken vertikalen sein? – DanyCode

@DanyCode, ich brauche sie eigentlich, um genau in der Mitte zu bleiben. Wenn die beiden Bilder nebeneinander liegen, befinden sie sich beide auf der gleichen Linie, aber in der Mitte des Container-DIV, aber wenn sie in der Größe geändert wird, möchte ich, dass sie einen Tropfen untereinander haben und beide zentriert sind. .. Wenn das irgendeinen Sinn macht lol –

Hier ist eine Lösung, bei der die .flex-Item-Elemente sind 'display: inline-block' und 'vertical-align: middle'. Sie benötigen auch den .flex-Container, um 'text-align: center' zu haben, wenn Sie zentriert sein möchten. Ich habe eine Inline-Höhe für den Proof of Concept hinzugefügt.

.mainContainer { 
 
\t max-width:90%; 
 
\t background-color: #00a5bd; 
 
\t color: white; 
 
\t padding-top: 0 !important; 
 
\t min-height: 500px; 
 
\t margin: 0 auto; 
 
} 
 

 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.flex-item { 
 
    background: salmon; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: left; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
\t <title>Working HTML</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="mainContainer"> 
 
<ul class="flex-container"> 
 
    <li class="flex-item"><img src="http://placehold.it/273x138"></li> 
 
    <li class="flex-item" style="height: 110px"><img src="http://placehold.it/230x138" height="100"></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-03-24 20:44:28 deebs

Das ist extrem nah, ich möchte nur die zwei Flex-Container im mainContainer zentriert haben. –

Dieser Link kann helfen: https://css-tricks.com/centering-css -complete-guide/Ich habe das Gefühl, dass du mit der Position arbeiten musst: absolut, wenn du es auf dem Bildschirm zentrieren willst. Oder spielen Sie vielleicht mit Inline-Block und Vertical-Align: Middle und mehr. Viel Glück! – deebs

Das war die perfekte Ressource, und ich habe es in kürzester Zeit funktioniert! Vielen Dank! –

Wenn ich Sie richtig verstanden habe, müssen Sie die Mindesthöhe hinzufügen, um Behälter flex-und fügen Sie align-Artikel: center :)

Quelle

2016-03-24 21:16:37 claicham

ist es auf diese Weise Sie wollen sie sein?

.mainContainer { 
 
\t max-width:90%; 
 
\t background-color: #00a5bd; 
 
\t color: white; 
 
\t padding-top: 0 !important; 
 
\t min-height: 500px; 
 
\t margin: 0 auto; 
 
} 
 

 

 

 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
justify-content: center; 
 
} 
 

 
.flex-item { 
 
    background: salmon; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: left; 
 
}

<body> 
 
<div class="mainContainer"> 
 
<ul class="flex-container"> 
 
    <li class="flex-item"><img src="http://placehold.it/273x138"></li> 
 
    <li class="flex-item"><img src="http://placehold.it/230x138"></li> 
 
</ul> 
 
</div> 
 
</body>

Quelle

2016-03-29 13:20:40 DanyCode

Float Bilder links (haben sie nebeneinander) und vertikal zentriert, dann unter

Antwort

Verwandte Themen