Centering elements vertically with CSS is something that often gives designers trouble. This may look simple, but for those who code rarely on CSS, there is a high probability that they miss out on few things. I personally had an experience, so this tip might help few folks out there. For a variable amount of text that you want to center vertically and horizontally, you can use display: table-cell and vertical-align: middle. Let us do this in some style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** Wrapper Style */ <style type="text/css"> .wrapper { display: table-cell; width: 200px; height: 150px; text-align: center; vertical-align: middle; border: 1px dotted #656565; } </style> /** Wrapper Container */ <div class="wrapper"> This is an example text for the center align text or content vertically with CSS. </div> |
You may be interested in our other posts on free vortex WordPress theme and count current month posts.