I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center;
doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:
.pagination {_x000D_
text-align: center;_x000D_
}_x000D_
.pagination a {_x000D_
display: block;_x000D_
width: 30px;_x000D_
height: 30px;_x000D_
float: left;_x000D_
margin-left: 3px;_x000D_
background: url(/images/structure/pagination-button.png);_x000D_
}_x000D_
.pagination a.last {_x000D_
width: 90px;_x000D_
background: url(/images/structure/pagination-button-last.png);_x000D_
}_x000D_
.pagination a.first {_x000D_
width: 60px;_x000D_
background: url(/images/structure/pagination-button-first.png);_x000D_
}
_x000D_
<div class='pagination'>_x000D_
<a class='first' href='#'>First</a>_x000D_
<a href='#'>1</a>_x000D_
<a href='#'>2</a>_x000D_
<a href='#'>3</a>_x000D_
<a class='last' href='#'>Last</a>_x000D_
</div>_x000D_
<!-- end: .pagination -->
_x000D_
To get the idea, what I want:
I think the best way is using margin
instead of display
.
I.e.:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
Check the result and the code:
IE7 doesn't know inline-block
.
You must add:
display:inline;
zoom: 1;
Just adding
left:15%;
into my css menu of
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
did the centering trick too
Using Flex
.pagination {_x000D_
text-align: center;_x000D_
display:flex;_x000D_
justify-content:center;_x000D_
}_x000D_
.pagination a {_x000D_
display: block;_x000D_
width: 30px;_x000D_
height: 30px;_x000D_
float: left;_x000D_
margin-left: 3px;_x000D_
background: url(/images/structure/pagination-button.png);_x000D_
}_x000D_
.pagination a.last {_x000D_
width: 90px;_x000D_
background: url(/images/structure/pagination-button-last.png);_x000D_
}_x000D_
.pagination a.first {_x000D_
width: 60px;_x000D_
background: url(/images/structure/pagination-button-first.png);_x000D_
}
_x000D_
<div class='pagination'>_x000D_
<a class='first' href='#'>First</a>_x000D_
<a href='#'>1</a>_x000D_
<a href='#'>2</a>_x000D_
<a href='#'>3</a>_x000D_
<a class='last' href='#'>Last</a>_x000D_
</div>_x000D_
<!-- end: .pagination -->
_x000D_
text-align: center;
float: none;
You can also do this by changing .pagination
by replacing "text-align: center" with two to three lines of css for left, transform and, depending on circumstances, position.
.pagination {_x000D_
left: 50%; /* left-align your element to center */_x000D_
transform: translateX(-50%); /* offset left by half the width of your element */_x000D_
position: absolute; /* use or dont' use depending on element parent */_x000D_
}_x000D_
.pagination a {_x000D_
display: block;_x000D_
width: 30px;_x000D_
height: 30px;_x000D_
float: left;_x000D_
margin-left: 3px;_x000D_
background: url(/images/structure/pagination-button.png);_x000D_
}_x000D_
.pagination a.last {_x000D_
width: 90px;_x000D_
background: url(/images/structure/pagination-button-last.png);_x000D_
}_x000D_
.pagination a.first {_x000D_
width: 60px;_x000D_
background: url(/images/structure/pagination-button-first.png);_x000D_
}
_x000D_
<div class='pagination'>_x000D_
<a class='first' href='#'>First</a>_x000D_
<a href='#'>1</a>_x000D_
<a href='#'>2</a>_x000D_
<a href='#'>3</a>_x000D_
<a class='last' href='#'>Last</a>_x000D_
</div>_x000D_
<!-- end: .pagination -->
_x000D_
Since many years I use an old trick I learned in some blog, I'm sorry i don't remember the name to give him credits.
Anyway to center floating elements this should work:
You need a structure like this:
.main-container {_x000D_
float: left;_x000D_
position: relative;_x000D_
left: 50%;_x000D_
}_x000D_
.fixer-container {_x000D_
float: left;_x000D_
position: relative;_x000D_
left: -50%;_x000D_
}
_x000D_
<div class="main-container">_x000D_
<div class="fixer-container">_x000D_
<ul class="list-of-floating-elements">_x000D_
_x000D_
<li class="floated">Floated element</li>_x000D_
<li class="floated">Floated element</li>_x000D_
<li class="floated">Floated element</li>_x000D_
_x000D_
</ul>_x000D_
</div>_x000D_
</div>
_x000D_
the trick is giving float left to make the containers change the width depending on the content. Than is a matter of position:relative and left 50% and -50% on the two containers.
The good thing is that this is cross browser and should work from IE7+.
Add this to you styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*If your container width is 50px put 25px, if it is 10em put 5em.
Centering floats is easy. Just use the style for container:
.pagination{ display: table; margin: 0 auto; }
change the margin for floating elements:
.pagination a{ margin: 0 2px; }
or
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
and leave the rest as it is.
It's the best solution for me to display things like menus or pagination.
Strengths:
cross-browser for any elements (blocks, list-items etc.)
simplicity
Weaknesses:
@arnaud576875 Using inline-block elements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:
Strengths:
Weknesses:
gaps between inline-block elements - it works the same way as a space between words. It may cause some troubles calculating the width of the container and styling margins. Gaps width isn't constant but it's browser specific (4-5px). To get rid of this gaps I would add to arnaud576875 code (not fully tested):
.pagination{ word-spacing: -1em; }
.pagination a{ word-spacing: .1em; }
it won't work in IE6/7 on block and list-items elements
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
create two or more div's you want and give them a definite width like 100px for each then float it left or right
then warp these two div's in another div and give it the width of 200px. to this div apply margin auto. boom it works pretty well. check the above example.
Source: Stackoverflow.com