Question

我试图在div中垂直居中一些文字。听起来很简单，但我无法得到它。这是代码，对于糟糕的格式和做法感到抱歉，这是一些快速而又肮脏的东西：

＆＃13;

import math

d = [0] * 9
offset = 10

dlen = len(d)
r = [d[i] + offset * math.sin(i * math.pi / (dlen - 1))
     for i in range(dlen)]

print d
print r

＆＃13;

如您所见，中央svg图像周围有四个方框。水平对中＆＃34;容器内的元素＆＃34; div很容易，垂直居中的每个元素内的文本都不是。完全没有。

我尝试过各种各样的解决方案，其中没有一种能够像预期的那样发挥作用（文本只是最重要的）。我错过了一些明显的东西，还是我想做一些不可能的事情？

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

Answer 1

由于您使用的是flexbox，因此无需使用vertical-align。

以下两点需要考虑：

创建弹性容器时，只有子元素成为弹性项目。除了孩子之外的任何后代元素都不是不 flex项目，并且flex属性不适用于它们。

包装文字的div框不是弹性项目。他们是flex项目的子项（#first，#second等），并且flex属性不适用。

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

试试这个：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

回复： vertical-align

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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中垂直居中文本

2 个答案: