浮動圖像左（並排）和垂直居中，然後下降中心

我需要能夠浮動圖像左（並排），並垂直居中在div中，然後讓他們堆疊垂直同時保持它們在窗口大小調整時在div中水平居中。我有它，所以它是水平居中，並保持這種方式，我只是無法弄清楚如何垂直居中。浮動圖像左（並排）和垂直居中，然後下降中心

預先感謝您！

這是我的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>

來源

2016-03-24 J.Hope

你想這兩個是在左垂直？ – DanyCode

@DanyCode，我實際上需要他們留在中間。如果兩個圖像並排放置，它們將位於同一行上，但位於容器div的中心，但如果調整大小，我希望它們有一個放在另一個下面，並且都以居中。 ..如果這是有道理的大聲笑 –

這裏是一個解決方案，其中.flex項元素是 '顯示：內聯塊' 和 '垂直對齊：中間'。如果你想讓它們居中，你還需要使用.flex容器來設置'text-align：center'。我添加了一個內聯高度來證明概念。

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

來源

2016-03-24 20:44:28 deebs

這是非常接近，我只想在兩個柔性容器集中在mainContainer .. –

此鏈接可能有所幫助：https://css-tricks.com/centering-css -complete-guide /我有一種感覺，你必須使用位置：絕對如果你想它在屏幕上居中。或者可能使用內聯塊和垂直對齊：中間多一些。祝你好運！ – deebs

這是完美的資源，我很快就得到了它的工作！謝謝！ –

如果我理解正確的話，你需要添加最小高度彎曲容器，並添加對齊項：中心:)

來源

2016-03-24 21:16:37 claicham

是這樣說你想讓他們成爲？

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

來源

2016-03-29 13:20:40 DanyCode

浮動圖像左（並排）和垂直居中，然後下降中心

回答

相關問題