Question

我正在尝试这个：

看起来像这样：

忽略风格，我只想垂直居中“Pasiónporel vestuario”。

这是我的HTML代码（我正在使用Bootstrap 3）：

<div class="container-fluid">
    <div class="row ">
        <div class="col-sm-12 " id="pasion-div">
            <div class="text-center">
                <h1 id="pasion-texto">Pasión por el vestuario</h1>
            </div>
        </div>
    </div>
</div>

该唯一容器中使用的CSS：

#pasion-div{
    background-image: url("media/imagen-fondo-menu.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    padding: 13px;
}

#pasion-texto{
    font-family: 'Lora', serif;
    color: white;
    font-size: 5em;
    /*width: 400px;*/
}

我试过这个：

.vertical-align {
    vertical-align: middle;
    display: inline-block;
}

但它只是将它移到左上角。

我认为某些元素之间存在一些冲突，或者div可能没有很好的排序。

Answer 1

如果要始终在全宽度上使用滑块，可以删除col-sm-12类（与其一样，所有分辨率的宽度始终为100％）并另外添加这些样式你的：

#pasion-div{
    background-image: url("media/imagen-fondo-menu.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    padding: 13px;

    /* add these */
    display: table;
    width: 100%;
}

#pasion-div > div {    
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

display：table-cell在IE8（含）及以上版本中工作。

Answer 2

我通常使用变换来完成此任务。我在这里为你设置了一个简单的例子：

https://jsfiddle.net/hrmjd6ca/

查看caniuse以获取浏览器支持：

http://caniuse.com/#feat=transforms2d

CSS

.container {
  margin: 0 auto;
  width: 50%;
  height: 200px;
  margin-top: 50px;
  background:#c4c4c4;
}

.inner-container {
  width: 20%;
}

.centre-aligned {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML

<div class="container">
  <div class="inner-container centre-aligned">
    <div class="label">Some text</div>
    <div class="label">hello, world</div>
  </div>
</div>

Answer 3

如果您不需要支持旧浏览器，那么可以使用flexbox：

CSS

.flex-row {display:flex;}

#pasion-div {
    display:flex;
    align-items:center;
    justify-content:center;
    ...
}

HTML

<div class="container-fluid">
    <div class="row flex-row">
        <div class="col-sm-12 " id="pasion-div">
            <h1 id="pasion-texto">Pasión por el vestuario</h1>
        </div>
    </div>
</div>

http://codepen.io/mbrowne/pen/kXvQyr

或者如果您需要更广泛的浏览器支持，那么您可以使用display:table作为@MajeStic建议。

如何使用Bootstrap 3将div垂直居中在div内

3 个答案: