Question

我这里有一个jsfiddle - http://jsfiddle.net/gomwyt2j/1/

超级简单，我只需要垂直居中，使其与按钮对齐

我没有尝试似乎工作

    <div class="container">

        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-3 text-center text"><p>Some Info</p></div>
            <div class="col-sm-4 text-center text"><p>Some more Info Her</p></div>
            <div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a></div>
            <div class="col-sm-1"></div>
        </div>

        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-3 text-center text"><p>Some Info</p></div>
            <div class="col-sm-4 text-center text"><p>Some more Info Her</p></div>
            <div class="col-sm-3 text-center"><a class="btn">Read More</a></div>
            <div class="col-sm-1"></div>
        </div>

    </div>

Answer 1

一种可能的解决方案是使用line: height：

<强> HTML

<div class="container">
    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-3 text-center text">
            <p>Some Info</p>
        </div>
        <div class="col-sm-4 text-center text">
            <p>Some more Info Her</p>
        </div>
        <div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a>
        </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-3 text-center text">
            <p>Some Info</p>
        </div>
        <div class="col-sm-4 text-center text">
            <p>Some more Info Her</p>
        </div>
        <div class="col-sm-3 text-center"><a class="btn">Read More</a>
        </div>
        <div class="col-sm-1"></div>
    </div>
</div>

<强> CSS

.row {
    background: gray;
    color: white;
    padding: 5px 0;
    margin: 0 0 10px 0;
}
.text p {
    display: inline-block;
    //padding: 9px 0 0 0;
    vertical-align: middle;
}
.btn-btn {
}
.btn {
    background: red;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}
.col-sm-3, .col-sm-4 {
    line-height: 35px; /*add line height*/
}
p {
    margin: 0;/*remove margin from p*/
}

fiddle

垂直居中容器中的文本

1 个答案: