Question

我想在DIV中垂直居中一些文字。但是，我正在使用Bootstrap，并且没有一种传统方法似乎可以工作，因为它在一列中。这是我到目前为止所得到的：

HTML：

<div class="col-sm-6">
    <div class="innercontent">
        <h2 class="text-center">Last Hope: The Halo Machinima</h2>
    </div>
</div>

CSS：

.innercontent {
    display:block
    margin:auto 0;
}

col-sm-6没有设定的高度，内部也没有，因为它们会因多次使用而有所不同。 CSS是我认为会起作用但不起作用的。
我有点想要你可以在这里的实时开发网站上看到的效果：http://dev.infiniteideamedia.com/machinima/lasthope.php但是使用不太合适的方法并没有完全集中。

Answer 1

这就是你将div内有动态高度

的内容集中在一起的方法

＆＃13;

.col-sm-6 {
  border: 1px solid;
  min-height: 300px;
  position: relative;
  max-width: 600px;
}

h2 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0%,-50%);
  width: 100%;
  text-align: center;
}

＆＃13;

<div class="col-sm-6">
     <div class="innercontent">
         <h2 class="text-center">Last Hope: The Halo Machinima</h2>
     </div>
</div>

＆＃13;

Answer 2

大卫沃尔什写了一篇好文章article on centering。看看它。在以下代码段中运行

＆＃13;

.innercontent {
 height:400px;
 background:#777; 
padding-top:20%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
  <div class="innercontent">
    <h2 class="text-center">Last Hope: The Halo Machinima</h2>
  </div>
</div>

＆＃13;

在引导列中垂直居中DIV中的内容

2 个答案: