Question

我知道有关于这个主题的几个问题，但是我认为他们依赖在之前给出的另一个CSS properties上。

我有一个嵌套的<div id="tituloParametros>"，我需要它的text / contains以垂直和水平位置为中心。

这是我的标记：

<div id="outer">

        <div id="parametros">
        <div id="tituloParametros">Ingresa los puntos conocidos x,f(x)</div>
        </div>

        <div id="resultados">
            <div id="graficos">
                <div id="bars"></div>
                <div id="fx"></div>
                <div id="pinchetabla">Tabla inútil</div>
            </div>
            <div id="loquerealmenteimporta"></div>  
        </div>

</div>

这是应用的CSS：

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
}
      #tituloParametros {
        height: 9%;
        width: 100%;
        background-color: red;
        text-align:center;
        vertical-align:middle
      }

#resultados {
  float:right;
  width: 80%;
  height: 100%;
}

      #graficos {
        height: 75%;
        width: 100%;
      }

          #bars {
            float: left;
            height: 100%;
            width: 30%;
          }

          #fx {
            float: left;
            height: 100%;
            width: 30%;
          }          

          #pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }

我想：

text-align:center;
vertical-align:middle

两者都会成功，但事实并非如此。添加display: table-cell;并不能解决问题，它实际上会将背景调整为文本限制。

这是how it looks like

Answer 1

您是对的 - table / table-cell方法不起作用here。

作为替代方案，您可以采用绝对定位方法。当top值50%减去元素高度的一半时，元素将垂直居中。在这种情况下，它应该不是问题，因为已经使用%单位设置了高度。 100% - 50% - 9% * .5 = 45.5%如果不是这种情况，您可以使用calc()或负边距来减去来自px单元的%单元。在这种情况下，值得注意的是，子元素绝对位于 relative 到父元素。

更新了CSS - UPDATED EXAMPLE HERE

#parametros {
    float:left;
    width: 20%;
    height: 100%;
    outline : 1px solid black;
    position:relative;
}
#tituloParametros {
    background-color: red;
    width: 100%;
    height: 9%;
    text-align:center;
    position:absolute;
    top:45.5%
}

元素#tituloParametros现在位于父元素的中心。如果要将文本置于其中心，可以使用span元素包装文本，然后使用table / table-cell垂直居中方法：

UPDATED EXAMPLE HERE

#tituloParametros {
   /* other styling.. */
    display:table;
}
#tituloParametros > span {
    display:table-cell;
    vertical-align:middle;
}

Answer 2

这是我对此的解决方法！:::: HTML：

<div id="parametros">
<div id="tituloParametros"><p>Ingresa los puntos conocidos x,f(x)</p></div>
</div>

CSS：

  #tituloParametros {
            height: 70px;
            width: 100%;
            background-color: red;
            text-align:center;
            vertical-align:middle
          }
          #tituloParametros p{
            line-height: 70px;
          }

Answer 3

<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

这是演示 http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html

如何在嵌套div中实际居中（垂直和水平）文本

3 个答案: