0

I'm trying to place the text at the same line as the pagination's buttons. enter image description here

As you can see in the code below, I've tried putting the text into a <span> element, rising the height of the span, and/or using the setting the vertical-align: middle; with no luck.

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

Thanks for helping

Richard77
  • 20,343
  • 46
  • 150
  • 252
  • Did you try any of these solutions? http://stackoverflow.com/questions/20005278/twitter-bootstrap-3-vertically-center-content – Carol Skelly Mar 28 '17 at 17:08

3 Answers3

1

You could try display: table-cell; vertical-align: middle; if you don't mind getting your hands a little dirty.

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;
}
<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>
UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38
1

set line-height and height of span as same will vertically align the text

<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>
Sudhakar
  • 324
  • 3
  • 9
1

Add a valign class to your row that makes it flex with align-items: center for vertical alignment.

.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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64