如何放置位置在具有行类的div中间设置文本

Question

我试图将文字放在与分页按钮相同的行上。

正如您在下面的代码中看到的那样，我尝试将文本放入<span>元素，提升范围的高度，和/或使用vertical-align: middle;设置没有运气。

<div class="row">
    <div class="col-md-2">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-md-1" style ="vertical-align: middle;">
        <span style="height: 70px; display: block;">
            10 of 137 items
        </span>
    </div>
</div>

感谢您的帮助

Answer 1

如果你不介意弄脏手，你可以试试display: table-cell; vertical-align: middle;。

＆＃13;

＆＃13;

div[class*="col"] {
    width: 49%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

.col-md-1 span {
    display: table-cell;
    vertical-align: middle;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-2">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-md-1" style ="vertical-align: middle;">
        <span style="height: 70px;;">
            10 of 137 items
        </span>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将span-line和span的高度设置为相同将垂直对齐文本

<div class="row">
    <div class="col-md-2">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-md-1" style ="vertical-align: middle;">
        <span style="height: 70px;line-height:70px; display: block;">
            10 of 137 items
        </span>
    </div>
</div>

Answer 3

在您的行中添加valign课程，使其flex与align-items: center进行垂直对齐。

.valign {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
    <div class="col-md-2">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="col-md-1">
        <span>
            10 of 137 items
        </span>
    </div>
</div>