How to vertically center content of a blockPublished: Wednesday, 06 February 2013 16:02 Written by Ogri Hits: 11496
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
position
attribute asrelative
orabsolute
. - Set a fixed height for the child block.
- Set
position:absolute
andtop:50%
, in the style of child block, thus matching its upper limit with the middle of the parent block. - Specify the attribute
margin-top
of 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.
Example:
<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.
Latest News
-
Tuesday, 21 July 2020 03:18
Joomla 3: Redirect to same page after successful login -
Saturday, 30 December 2017 16:11
Joomla: how to add your own language constants or override existing ones -
Thursday, 30 November 2017 23:27
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments -
Saturday, 25 June 2016 15:33
Unified filtering of mod_jcomments_latest module's output -
Thursday, 17 September 2015 16:23
Post an illustrated Joomla-site article on Facebook using OG-tags
Articles Most Read
-
138590
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-1. Transferring jDownloads and jComments -
69138
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments -
40328
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-2. Template, editor, and other extensions -
38173
Editing animated GIF-images in Photoshop CS3 -
34833
Migrating from Joomla 1.5 to Joomla 2.5. Part 1. Transferring content
Login
Guest Column
Recent comments
-
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments
-
Buy press releases 26.01.2023 20:29
-
-
Joomla: Merge two sites into one using component J2XML
-
mmorpg 26.01.2023 14:52
Ꮋello! I'm at work surfing around youг bⅼog from my new іⲣhone! Just wanted to say Ι loᴠe reading ...
-
-
Joomla: how to add your own language constants or override existing ones
-
친구랑마사지 26.01.2023 17:55
After I initially commented I appear to have clicked the -Notify me when new comments are added ...
-
-
Migrating from Joomla 1.5 to Joomla 2.5. Introduction
-
로미로미 26.01.2023 20:11
This is a really good tip especially to those new to the blogosphere. Brief but very accurate info… Many ...
-
스웨디시마사지 26.01.2023 14:49
Oh my goodness! Amazing article dude! Thanks, However I am having troubles with your RSS. I don't ...
-
-
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-1. Transferring jDownloads and jComments
-
서울출장마사지 26.01.2023 17:10
Nice blog here! Also your web site loads up fast! What web host are you using? Can I get your affiliate ...
-
Buy press releases 26.01.2023 16:09
Good day! Would you mind if I share your blog with my zynga group? There's a lot of folks that I think ...
-
-
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-2. Template, editor, and other extensions
-
ฝาก 1 รับ 50 26.01.2023 16:04
Poost writing is alsao a fun, if you be familiar with afterward you can write if nnot itt is complicated ...
-
-
Unified filtering of mod_jcomments_latest module's output
-
bankomat ru 26.01.2023 19:25
I'm impressed, I must say. Seldom do I encounter a blog that's equally educative annd engaging, and let ...
-
Sparkling Books 26.01.2023 19:02
Realⅼy gooɗ books from a British publisher, ԝith discounts Check oսt my webpage ... Sparkling Books ...
-
Read more...