css - 如何在具有行类的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

将 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>