Question

我需要能够浮动图像左边（将它们并排放置）并将它们垂直居中在div中，然后让它们垂直堆叠，同时在调整窗口大小时使它们在div中水平居中。我有它，所以它是水平居中，并保持这种方式，我只是无法弄清楚如何垂直居中。

提前谢谢！

这是我的HTML：

＆＃13;

.mainContainer {
	max-width:90%;
	background-color: #00a5bd;
	color: white;
	padding-top: 0 !important;
	min-height: 500px;
	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;
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
	<title>Working HTML</title>
	<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>

＆＃13;

Answer 1

这是一个解决方案，其中.flex-item元素显示：inline-block＆＃39;和＆＃39; vertical-align：middle＆＃39;。您还需要.flex-container才能使文本对齐：中心＆＃39;如果你想让他们居中。我添加了一个内联高度来证明概念。

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
	<title>Working HTML</title>
	<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

如果我理解正确，你需要将最小高度添加到flex-container并添加align-items：center：）

Answer 3

这是你希望他们这样做的吗？

＆＃13;

.mainContainer {
	max-width:90%;
	background-color: #00a5bd;
	color: white;
	padding-top: 0 !important;
	min-height: 500px;
	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;
}

＆＃13;

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

＆＃13;

将图像浮动（并排放置）并垂直居中，然后放在中心下方

3 个答案: