Did you ever try to center a block of successive images or any elements that you collected in a DIV? Did you try text-align: center and margin: 0 auto without success? Can feel so complicated, but after all with the help of a little CSS trick the centering gets easy to achieve. We just need to make sure that our DIV to center is an inline element, e.g. with display: inline-block. In this way, a text-align: center on the parent will be working for it.
|
1 2 3 4 5 6 7 |
<div style="text-align: center;"> <div style="display: inline-block;"> <img src="http://domain.com/1.gif"> <img src="http://domain.com/2.gif"> <img src="http://domain.com/3.gif"> </div> </div> |
And when we need to center a div vertically AND horizontally, the following CSS code will do the trick:
|
1 2 3 4 5 6 7 8 9 10 |
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } |
