我正在尝试找到最有效的方法来将文本与div对齐。我尝试了一些方法,但似乎没有一个有效。

.推荐文本{位置:绝对;左:15px;顶部:15px;宽度:150px;高度:309px;垂直对齐:中间;文本对齐:居中;字体系列:Georgia,“Times New Roman”,Times,serif;字体样式:斜体;填充:1em 0 1em 0;}<div class=“推荐文本”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>


当前回答

HTML格式:

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS:

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

其他回答

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

这些天(我们不再需要InternetExplorer6-8),我只会使用CSS display:table(或display:flex)来解决这个问题。

表:.vcenter(.v中心){显示:表格;背景:#eee;/*可选的*/宽度:150px;高度:150px;文本对齐:居中;/*可选的*/}.vcenter>:第一个子级{显示:表格单元格;垂直对齐:中间;}<div class=“vcenter”><p>这是我的文本</p></div>

弯曲:.vcenter(.v中心){显示:柔性;对齐项目:居中;高度:150px;对齐内容:中心;/*可选的*/背景:#eee;/*可选的*/宽度:150px;}<div class=“vcenter”><p>这是我的文字</p></div>


对于较旧的浏览器:

这是(实际上是)我最喜欢的解决方案(简单且非常受浏览器支持):

第二部分{边距:5px;文本对齐:居中;显示:内联块;}.vcenter(.v中心){背景:#eee;/*可选的*/宽度:150px;高度:150px;}.vcenter:之前{内容:“”;显示:内联块;高度:100%;垂直对齐:中间;最大宽度:0.001%;/*为了防止文本换行,你不应该注意到它*/}.vcenter>:第一个子级{显示:内联块;垂直对齐:中间;最大宽度:99.999%;}<div class=“vcenter”><p>这是我的文字</p></div><div class=“vcenter”><h4>这是我的文本<br/>文本</br/>文本</h4></div><div class=“vcenter”><div><p>这是我的</p><p>文本</p></div></div>

有几个技巧可以在div的中心显示内容或图像。有些答案非常好,我也完全同意。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

有10多种技术和示例。现在取决于你喜欢哪一个。

毫无疑问,显示:表格;display:table Cell是一个更好的技巧。

以下是一些好技巧:

技巧1-使用display:table;显示:表格单元

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

货物积载与系固安全操作规则

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

技巧2-通过使用显示:内联块

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

CSS代码

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet&nbsp;Explorer 9+ */
}

技巧3-使用位置:相对;位置:绝对

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

有一种更简单的方法可以垂直对齐内容,而无需诉诸表格/表格单元格:

http://jsfiddle.net/bBW5w/1/

在其中,我添加了一个不可见的(width=0)div,它假设容器的整个高度。

它似乎可以在Internet Explorer和Firefox(最新版本)中使用。我没有检查其他浏览器

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

当然,CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

尝试嵌入表元素。

<div><table style='width:200px;高度:100px;'><td style='vertical-align:middle;'>哥本哈根</td></table></div>