Upd: Русская версия статьи: Как отцентрировать контент в блоке по вертикали.
At first glance it may seem that the solution of the problem posed in the title is trivial: set the CSS-attribute
vertical-align:middle - and this is it. But it's not that simple. Principle of layout elements traditionally based on scaling by width, and content stretches or shrinks vertically in accordance with new width.
vertical-align is useful for centering contents of table cells, as well as of DIV blocks having the
display:table-cell attribute. The expected behavior of content vertical centering can also be achieved for elements of the page normal flow - blocks with the attribute
display:inline-block. In all other cases this approach does not apply, as most modern browsers simply uses
vertical-align attribute to be inherited by the child inline elements of the block. It will require a different method, the description of which is the focus of this article.
Just make a reservation: the use of this technique involves two assumptions:
- You can specify a fixed height of the inner block.
- You can assign absolute positioning to the inner block. Typically, this is not a problem, because the container can remain in the normal flow.
If these conditions are met, do the following:
- In the style of the container set the
- Set a fixed height for the child block.
top:50%, in the style of child block, thus matching its upper limit with the middle of the parent block.
- Specify the attribute
margin-topof child block with the value equal to half of its height. This will move the child block up to match its middle with the middle of the container.
<div style="position: relative;"> Container <div style="position:absolute; top:50%; height:8em; margin-top:-4em;"> Vertically centered child block </div> </div>
Here's how it looks in a browser:
An example of the practical use of this method while inscribing an image into container can be found in the next article.
Friday, 27 June 2014 13:35
Joomla: Content filtering by articles, categories and components
Saturday, 14 June 2014 14:00
The structure of internal links within Joomla site
Tuesday, 03 December 2013 23:05
Using of menu item aliases in Joomla
Thursday, 28 November 2013 14:23
Joomla: Merge two sites into one using component J2XML
Thursday, 10 October 2013 23:50
Photoshop: Processing photos of paintings for online gallery
- Migrating from Joomla 1.5 to Joomla 2.5. Part 2-1. Transferring jDownloads and jComments
- Editing animated GIF-images in Photoshop CS3
- Social Media Buttons in Joomla 2.5
- Migrating from Joomla 1.5 to Joomla 2.5. Part 2-2. Template, editor, and other extensions
- Migrating from Joomla 1.5 to Joomla 2.5. Part 1. Transferring content