内联块 div 的垂直居中内容答案

【问题标题】：Vertically center content of a inline-block div内联块 div 的垂直居中内容
【发布时间】：2018-08-14 16:45:40
【问题描述】：

我试图将 div 的内容水平和垂直居中。我找到了一些解释它的线程，但它永远不适合我的代码。

在另一个 div (.container) 中有 3 个居中的 div (.block)，它也是居中但在屏幕上。块的内容不垂直居中。我尝试使用 line-height，但我丢失了一些文本（超出块）。

这是我的代码：

.container {
    width: 70%;
    margin: 10px auto;
    position: relative;
    text-align: center;
    border: 1px solid black;
}

.block {
  background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797);
  background-image: -o-linear-gradient(150deg, #D7D7D7, #979797);
  background-image: linear-gradient(240deg, #D7D7D7, #979797);
  border-radius: 10px;
  height: 100px;
  width: 100px;
  display:inline-block;
  margin: 10px;
  padding: 10px;
  vertical-align: middle;
  line-height: 1.5;
}

<div class="container">
    <div class="block">Hello</div>
    <div class="block">Everybody</div>
    <div class="block">Would like to center it please</div>
</div>

我尝试将内容放在 p 标记中，它更好但仍然不居中。

谢谢。

【问题讨论】：

CSS vertical alignment of inline/inline-block elements的可能重复

标签： html css

【解决方案1】：

您可以使用 flex 在容器和其中的项目上执行此操作，使用如下所示的设置。在这种情况下，每个容器的文本内容都会自动被视为一个弹性项目，这使得居中成为可能。

.container {
  width: 70%;
  margin: 10px auto;
  text-align: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}

.block {
  background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797);
  background-image: -o-linear-gradient(150deg, #D7D7D7, #979797);
  background-image: linear-gradient(240deg, #D7D7D7, #979797);
  border-radius: 10px;
  height: 100px;
  width: 100px;
  margin: 10px;
  padding: 10px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="block">Hello</div>
  <div class="block">Everybody</div>
  <div class="block">Would like to center it please</div>
</div>

【讨论】：