All geek questions in one place

Vertical alignment methods

What are the best methods for vertically-align something regarding its element sizes. At the moment, I know that vertical-align:middle; works well inside <tr> .

Are there any other methodologies that I overlook that may work to achieve this?

+4
source share
5 answers

Here are 3 very good methods for vertically centering a child in a container - even if you don't know the height of the child. First 2 of this article CSS Tricks

Markup (for all methods):

 <div class="block"> <div class="centered"> Some text </div> </div>

Solution # 1: CSS Tables Method ( FIDDLE )

CSS

 /* This parent can be any width and height */ .block { display: table; width: 100%; background: orange; height: 300px; } .centered { display: table-cell; text-align: center; vertical-align: middle; background: pink; }

Solution # 2: Pseudo ('Ghost') element method ( FIDDLE )

CSS

 /* This parent can be any width and height */ .block { text-align: center; background: orange; height: 300px; } /* The ghost, nudged to maintain perfect centering */ .block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ .centered { display: inline-block; vertical-align: middle; width: 300px; background: pink; }

Solution # 3: Flexbox ( FIDDLE )

(Relevant) CSS:

 .block { background: orange; height: 300px; display: flex; align-items: center; }
+4
source

A great place for you is the CSS Tricks article . It conveys all the meanings that vertical-align can have and the various uses of each in a clear concise form.

Here are the options:

 vertical-align: baseline /* keyword values */ vertical-align: sub vertical-align: super vertical-align: text-top vertical-align: text-bottom vertical-align: middle vertical-align: top vertical-align: bottom

And here are the valid options for table cells:

 baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned. top Align the top padding edge of the cell with the top of the row. middle Center the padding box of the cell within the row. bottom Align the bottom padding edge of the cell with the bottom of the row.

In addition, you can try other tricks, such as setting the line-height equal to the height of the parent container.

0
source

with a table you can use

 <table> <tr> <td valign="middle"></td> </tr> </table>

or css

 td{ vertical-align:middle; }

If you want css vertical alignment to be average for div use display: table-cell; and display: table;

 #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; display: table; width: 100%; } #abc span { vertical-align:middle; display: table-cell; }

DEMO HERE

0
source

This may come as a surprise to you, but vertical-align was such a confusing thing that you can get confused in it even for the smallest of divs

Here are some amazing resources to figure it out:

What you need to understand is when to use this property, and when not => in some cases, it applies only to table , and in some - choose pure css methods!

0
source

My favorite modal centering is to use a combination of position and translate , as described here: http://css-tricks.com/centering-percentage-widthheight-elements/ p>

In short:

 .center { width: 50%; /* or whatever you want your width to be; defaults to 100% */ height: 50%; /* or whatever you want your height to be; defaults to wrapping content */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }

This may or may not work according to your use case, but this is a good trick that is in your toolbar.

0
source

Source: https://habr.com/ru/post/978929/

More articles:


All Articles