在div中垂直居中文本 [英] Vertically center text inside a div

问题描述

我试图垂直居中一些div内的文字。听起来很容易，但我无法得到它。这里是代码，抱歉的格式和做法不好，这是快速和肮脏的东西：

 < div id =containerstyle =text-align：center; border：5px solid blue; display：flex; flex-direction：row; justify-content：center; height：100px> < div id =firststyle =min-height：100px; min-width：200px; background-color：green> < div style =vertical-align：middle>第一个箱子< / div> < / DIV> < div id =secondstyle =min-height：100px; min-width：200px; background-color：yellow> < div style =vertical-align：middle>第二个盒子< / div> < / DIV> < svg version =1.1id =SVGxmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxviewBox =0 0 300 300preserveAspectRatio =xMidYMid meetheight =100％width：auto> <！ - 剪去svg代码 - > < / SVG> < div id =thirdstyle =min-height：100px; min-width：200px; background-color：red> < div style =>第三个盒子< / div> < / DIV> < div id =fourthstyle =min-height：100px; min-width：200px; background-color：cyan; vertical-align：middle> < p为H.第四个框< / p> < / div>< / div>  

看，中央svg图像周围有四个框。水平居中容器div内的元素很容易，垂直居中每个元素内的文本不是。根本没有。

我尝试了各种解决方案，其中没有一个像预期的那样工作（文本只是上到框的顶端）。我错过了一些显而易见的东西，还是我想做一些不可能的事情？

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

解决方案

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

以下是需要考虑的两件事：

1. 只有子元素变成弹性项目。任何超出子元素的后代元素都不是 flex项目，而flex属性不适用于它们。
   $ b 您的 div 包装文字的框不是弹性项目。他们是flex项目的子项（ #first ， #second 等），而且flex属性不适用。

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




试试这个：



  #first {
 display ： 柔性; 
 justify-content：center; 
 align-items：center; 
} 
 
 #second {
 display：flex; 
 justify-content：center; 
 align-items：center; 
 
 
 
 
 
 $ p $ snippetdata-lang =jsdata-hide =truedata-console =truedata-babel =false> 
 
  #first {display：flex; justify-content：center; align-items：center;}＃second {display：flex; justify-content：center; align-items：center;}  
 
 < div id = containerstyle =text-align：center; border：5px solid blue; display：flex; flex-direction：row; justify-content：center; height：100px> < div id =firststyle =min-height：100px; min-width：200px; background-color：green> < div style =vertical-align：middle>第一个框< / div> < / DIV> < div id =secondstyle =min-height：100px; min-width：200px; background-color：yellow> < div style =vertical-align：middle>第二个盒子< / div> < / DIV> < svg version =1.1id =SVGxmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxviewBox =0 0 300 300preserveAspectRatio =xMidYMid meetheight =100％width：auto> <！ - 剪去svg代码 - >< / svg> < div id =thirdstyle =min-height：100px; min-width：200px; background-color：red> < div style =>第三个盒子< / div> < / DIV> < div id =fourthstyle =min-height：100px; min-width：200px; background-color：cyan; vertical-align：middle> < p为H.第四个框< / p> < / div>< / div>  


$ b $ hr b


回复： vertical-align
$ b

vertical-align：middle 不能正常工作是因为此属性位于内联维中。所以它实际上是垂直居中文本...在它的 line-height 中。为了得到你期望的行为，指定一个与容器高度相等的 line-height



  #third {
 vertical-align：middle; 
 line-height：100px; 
 
 
 
 $ b 
 
 
 <重写>  #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 = containerstyle =text-align：center; border：5px solid blue; display：flex; flex-direction：row; justify-content：center; height：100px> < div id =firststyle =min-height：100px; min-width：200px; background-color：green> < div style =vertical-align：middle>第一个框< / div> < / DIV> < div id =secondstyle =min-height：100px; min-width：200px; background-color：yellow> < div style =vertical-align：middle>第二个盒子< / div> < / DIV> < svg version =1.1id =SVGxmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxviewBox =0 0 300 300preserveAspectRatio =xMidYMid meetheight =100％width：auto> <！ - 剪去svg代码 - >< / svg> < div id =thirdstyle =min-height：100px; min-width：200px; background-color：red> < div style =>第三个盒子< / div> < / DIV> < div id =fourthstyle =min-height：100px; min-width：200px; background-color：cyan; vertical-align：middle> < p为H.第四个框< / p> < / div>< / div>

I'm trying to vertically center some text inside a div. Sounds easy but I can't get it. Here's the code, sorry for the bad formatting and practices, it's something whipped up fast and dirty:

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

As you can see, there's four boxes around a central svg image. Horizontally centering the elements inside the "container" div was easy, vertically centering the text inside each of those elements is not. Not at all.

I've tried various solutions, none of which worked like intended (the text just goes up to the top of the box). Am I missing something obvious or am I trying to do something impossible?

I'm looking for a flexible solution, something that can work without knowing the exact height in pixels of the boxes nor the container.

解决方案

Since you are using flexbox, you don't need to use vertical-align.

Here are two things to consider:

1. When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.

   Your div boxes wrapping your text are not flex items. They are children of flex items (#first, #second, etc.) and flex properties don't apply.

2. If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well.

   Try this:

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

---

Re: vertical-align

The reason vertical-align: middle wasn't working for you is because this property centers within the inline dimension. So it actually was vertically centering the text... within its line-height. To get the behavior you expect, specify a line-height equal to the container 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>

这篇关于在div中垂直居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！