带有图像和文本的水平居中 Flexbox答案

【问题标题】：Horizontally Centering Flexbox with Image and Text带有图像和文本的水平居中 Flexbox
【发布时间】：2018-09-23 02:12:20
【问题描述】：

我有一个这样的 div，我希望文本和图像水平对齐，div 左侧和 div 右侧的空间相等。这是我目前的代码，虽然它绝对不是最优的：

.window{
  position:absolute;
  width: 400px;
  height: 300px;
  background-color:#424242;
}
.content{
  padding-top:50px;
  width: 50%;
  position:relative;
  vertical-align: top;
  margin: 0 auto;
  display:flex;
}
img {
  height: 32px;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  position: relative;
  float: left;
}
.textcontent{
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
  display: block;
  line-height: 182%;
}
.text{
  font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
</head>

<body>


<div class="window">
  <div class="content">
    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
    <div class="textcontent">
      <div class="text"> Some Centered Text. </div>
      <div class="text"> Some Other Text. </div>
    </div>
  </div>
</div>

</body>
</html>

问题在于“窗口”可以是任意大小，图像可以是相当多的大小，而文本内容中的项目可以是更长和更大的字体大小。此外，第二行文本并不总是可见的。

这是一个问题，因为如果文本很长，50% 的宽度很小，并且文本在有足够空间的情况下会换行数次。

.window{
  position:absolute;
  width: 500px;
  height: 300px;
  background-color:#424242;
}
.content{
  padding-top:50px;
  width: 50%;
  position:relative;
  vertical-align: top;
  margin: 0 auto;
  display:flex;
}
img {
  height: 32px;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  position: relative;
  float: left;
}
.texcontentt{
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
  display: block;
  line-height: 182%;
}
.text{
  font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
</head>

<body>


<div class="window">
  <div class="content">
    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
    <div class="textcontent">
      <div class="text"> Some text that is very very long and wraps. </div>
      <div class="text"> This text is also very long and also wraps. </div>
    </div>
  </div>
</div>

</body>
</html>

我可以通过增大 .content 规则中的宽度 % 来解决这个问题，但是对于大窗口中的小内容，它将不再居中。

长话短说，有没有更好的方法让我想要的不同尺寸的文本居中，而不必让它很窄？

谢谢！

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

要在 div 内水平对齐文本和图像，可以使用 display:flex 和 justify-content: center。 Justify-content:center 会将子元素对齐在容器的中心。

.content {
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center; /* Only if you want it vertically center-aligned as well */
  background: #ccc;
  padding: 40px;
}

<div class="window">
  <div class="content">
    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
    <div class="textcontent">
      <div class="text"> Some text that is very very long and wraps. </div>
      <div class="text"> This text is also very long and also wraps. </div>
    </div>
  </div>
</div>

View in CodePen

希望这会有所帮助！

【讨论】：

稍微解释一下会很有帮助。什么问题，你做了什么来解决它？
谢谢！最主要的是 justify-content: center 而不是 width: 50%。