Question

使用Bootstrap：我有2排。 first_row有1列。 second_row有2列。每列有1个标题。每列中的标题在列的顶部对齐，并在每列中水平对齐，但我希望每个标题在每列中垂直居中并水平居中。我该怎么做？

    <div class="row first_row">
        <div class="col-xs-12">
            <h1>header1</h1>
        </div>
    </div>

    <div class="row second_row">
        <div class="col-xs-6">
            <h2>header2</h2>
        <div class="col-xs-6">
            <h2>header3</h2>
        </div>
    </div>

.col-xs-12 {
height: 300px;
font-size: 100px;
text-align: center;
border: 2px solid black;
}
 h1 {
font-family: 'Seymour One', sans-serif;
font-size: 100px;
color: green;
}
.col-xs-6 {
height: 100px;
background-color: blue;
border: 2px solid black;
text-align: center;
}
 h2 {
font-family: 'Seymour One', sans-serif;
font-size: 100px;
color: blue;
}

Answer 1

添加自己的网格类的bootstap是一个坏主意，最好添加自己的。我将你的元素包裹在一个居中的盒子里并用它来对齐标题。如果您将父包装器位置设置为相对且子位置为绝对位置，则可以使用前50％使其向下移动一半。但是，您必须考虑要移动的元素的高度并进行调整。在这种情况下标题，字体大小为100,0边距和行高100.因此我们使用margin-top将其恢复50px：-50px

这是一个有效的例子：

http://jsfiddle.net/J3v9b/1/

HTML：

<div class="container">
    <div class="row first_row">
        <div class="col-xs-12">
            <div class="centering-box">
                <h1>header1</h1>
            </div>
        </div>
    </div>

    <div class="row second_row">
        <div class="col-xs-6">
            <div class="centering-box">
                <h2>header2</h2>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="centering-box">
                <h2>header3</h2>
            </div>
        </div>
    </div>
</div>

CSS：

.centering-box{
    position: relative;
    border: 2px solid black;
    text-align: center;
    font-size: 100px;
    display:block;
    width: 100%;
}
.first_row .centering-box{
    height: 300px;
}
.second_row .centering-box {
    height: 200px;
    background-color: blue;
}
h1,h2{
    font-family: 'Seymour One', sans-serif;
    font-size: 100px;
    position: absolute;
    top: 50%;
    width: 100%;
    margin: 0;
    margin-top: -50px;
    line-height: 100px;
}
h1 {
    color: green;
}
h2 {
    color: black;
}

如何使用Bootstrap垂直和水平对齐列中的标题

1 个答案: