Make an element middle aligned by its sibling - html

Question

I am using the pagination component in bootstrap, the pagination itself is simple:
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
However I want to show the metadata like total pages, total records beside the pagination, and I want the information can be aligned at middle by the pagination control.
And I can not add the page information inside the ul element since it is generated by a third-party library.
I have tried this:
http://plnkr.co/edit/abVwf6rnluYKiOOzXNrt?p=preview
As shown it does not align as expected.
And it seems that I can set the padding or margin for the div.pageinfo or set the height and line-height, but I wonder if this is possible without harding coding

Answer 1

The Problem
There are two main issues to contend with:
One issue blocking you from being able to move your blocks around is that you had the wrapping div with an inline-style of display: inline-block and Bootstrap classes like pull-left which were forcing your elements to display as they were.
The need for IE8 support will make it difficult at best to provide the same experience for your users without a hit to the performance of your site.
Recommendation
The expectation to have websites render identically in IE8 as to their modern counterpart is more or less unreasonable in this day and age. The number of hoops you'll have to jump through to do that is pretty insane. Bootstrap itself is also deprecating IE8 support as of Bootstrap 4. The only way I'd see a reasonable case for this is if there was Google Analytics data to show that a majority of your users are on IE8.
So the best thing you can do is to either (1) recommend that the pagination items are limited to X number so that it fits a certain width and update the fixed width every time something is added, or (2) accept graceful degradation of your site on IE8 in order to provide a better experience for what I am assuming is the majority of your users on modern browsers.
Solution: Modern Browsers
The easiest way to achieve what you want is to utilize flexbox. I've removed any unnecessary class names and included the simplest code sample below (that would primarily work in Chrome). The code with all the prefixes can be found in the demo, but this should get you what you want (minus IE8 and IE9).
Code (Demo)
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
CSS
#nav {
display: flex;
justify-content: center;
align-items: center;
}
.pageinfo {
margin-bottom: 5px;
margin-right: 10px;
}
Update: IE8 Solution
Here is a demo for an IE8 alternative that utilizes blocks in order to achieve the effect. However, while I know that you specifically requested not to hard code the size of the elements, that is not something (to my knowledge) that can be avoided due to the need to support legacy browsers like IE8.
The key thing to understand is that legacy browsers are far less intelligent than their modern counterparts. The only other alternative I can think that you can try is to use JavaScript to determine the width of the element dynamically, but it begins to be a lot of effort and impacts performance as well.
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</div>
CSS
#nav {
display: block;
width: 200px;
margin: 0 auto;
}
#nav div {
display: block;
}
.pageinfo {
float: left;
margin-right: 10px;
margin-top: 8px;
}
.page-menu {
float: left;
}
.page-menu ul {
margin: 0;
padding: 0;
margin-top: 2px;
}

Answer 2

I hope you are looking for something like below,
/* Styles go here */
.mata-data {
display: inline;
position: absolute;
margin-top: 27px;
margin-left: 25px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="text-center">
<div>
<div class="mata-data">Total:xxx 1/xx</div>
<div class="container pull-left">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>