div 内的文本垂直居中

Question

我正在尝试将 div 中的一些文本垂直居中。听起来很容易，但我做不到。这是代码，对于错误的格式和做法感到抱歉，它是快速而肮脏的东西：

<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
  <div id="first" style=" min-height:100px; min-width:200px; background-color:green">
    <div style="vertical-align:middle">
      first box
    </div>
  </div>
  <div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow">
    <div style="vertical-align:middle">
      second box
    </div>
  </div>
  <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
     <!--snipped away svg code-->

 </svg>
  <div id="third" style="min-height:100px; min-width:200px; background-color:red">
    <div style="">
      third box
    </div>
  </div>
  <div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
    <p>
      fourth box
    </p>
  </div>

</div>

如您所见，中央 svg 图像周围有四个框。将 "container" div 中的元素水平居中很容易，而将每个元素中的文本垂直居中则不然。完全没有。

我尝试了各种解决方案，none 其中的效果符合预期（文本刚好到达框的顶部）。我是否遗漏了一些明显的东西，或者我正在尝试做一些不可能的事情？

我正在寻找一种灵活的解决方案，它可以在不知道盒子或容器的确切像素高度的情况下工作。

Answer 1

因为你使用的是 flexbox，所以你不需要使用 vertical-align。

这里有两件事需要考虑：

当您创建弹性容器时，只有子元素成为弹性项目。子元素之外的任何后代元素不是弹性项目，弹性属性不适用于它们。

包裹文本的 div 框不是弹性项目。它们是弹性项目（#first、#second 等）的子项，并且弹性属性不适用。

如果要将弹性属性应用于弹性项目的子项，则还需要将弹性项目设为弹性容器。

试试这个：

#first { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

#second { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

#first {
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
  <div id="first" style=" min-height:100px; min-width:200px; background-color:green">
    <div style="vertical-align:middle">first box</div>
  </div>
  <div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow">
    <div style="vertical-align:middle">
      second box
    </div>
  </div>
  <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
       <!--snipped away svg code-->

</svg>
  <div id="third" style="min-height:100px; min-width:200px; background-color:red">
    <div style="">
      third box
    </div>
  </div>
  <div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
    <p>
      fourth box
    </p>
  </div>

</div>

回复：vertical-align

vertical-align: middle 不适合您的原因是因为此属性位于 内联维度 的中心。所以它实际上是将文本垂直居中...在其 line-height 内。要获得您期望的行为，请指定等于容器高度的 line-height。

#third {
    vertical-align: middle;
    line-height: 100px;
}

#first {
  display: flex;
  justify-content: center;
  align-items: center;
}

#second {
  display: flex;
  justify-content: center;
  align-items: center;
}

#third {
  vertical-align: middle;
  line-height: 100px;
}

<div id="container" style="text-align:center ;border: 5px solid blue; display:flex; flex-direction:row ; justify-content:center; height:100px">
  <div id="first" style=" min-height:100px; min-width:200px; background-color:green">
    <div style="vertical-align:middle">first box</div>
  </div>
  <div id="second" style=" min-height:100px; min-width:200px;  background-color:yellow">
    <div style="vertical-align:middle">
      second box
    </div>
  </div>
  <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
       <!--snipped away svg code-->

</svg>
  <div id="third" style="min-height:100px; min-width:200px; background-color:red">
    <div style="">
      third box
    </div>
  </div>
  <div id="fourth" style="min-height:100px; min-width:200px; background-color:cyan; vertical-align:middle ">
    <p>
      fourth box
    </p>
  </div>

</div>

Answer 2

此代码将使所有文本居中：

#container div div, #container div p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

展开此现场演示以查看实际效果：

#container {
    text-align:center;
    border: 5px solid blue;
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:100px;
}
#first {
    min-height:100px;
    min-width:200px;
    background-color:green;
}
#second {
    min-height:100px;
    min-width:200px;
    background-color:yellow;
}
#third {
    min-height:100px;
    min-width:200px;
    background-color:red;
}
#fourth {
    min-height:100px;
    min-width:200px;
    background-color:cyan;
}
#container div div, #container div p {
    position: relative;
 top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

<div id="container">
    <div id="first">
        <div>first box</div>
    </div>
    <div id="second">
        <div>second box</div>
    </div>
    <svg version="1.1" id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" height="100%" width: "auto">
        <!--snipped away svg code-->
    </svg>
    <div id="third">
        <div>third box</div>
    </div>
    <div id="fourth">
        <p>fourth box</p>
    </div>
</div>

通常只需要前三个属性，但您的第四个元素是 <p> 元素，它有顶部和底部边距，所以我添加了 margin: 0; 来取消它们。除非您可以使用 flexbox，否则这是不管标记如何使元素垂直居中的最可靠方法。

div 内的文本垂直居中

Vertically center text inside a div

html

css

flexbox