A FAQ on various IRC channels I help out on is How do I vertically center my stuff inside this area? This question is often followed by I"m using vertical-align:middle but it"s not working!
The problem here is three-fold:
HTML layout traditionally was not designed lớn specify vertical behavior. By its very nature, it scales width-wise, & the content flows khổng lồ an appropriate height based on the available width. Traditionally, horizontal sizing và layout is easy; vertical sizing and layout was derived from that.The reason vertical-align:middle isn"t doing what is desired want is because the author doesn"t understand what it"s supposed to lớn vày, but …… this is because the CSS specification really screwed this one up (in my opinion)—vertical-align is used to specify two completely different behaviors depending on where it is used.Bạn đang xem: Vertical-align là gì
quý khách vẫn xem: Vertical-align là gìQuý Khách sẽ xem: Vertical-align là gìvertical-align in table cells
When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:
vertical-align on inline elements
When vertical-align is applied khổng lồ inline elements, however, it"s a whole new ballgame. In this situation, it behaves lượt thích the (old, deprecated) align attribute did on
&
—as examples.
In this paragraph, I have two images—
and
—as examples.
Xem thêm: Tải Phần Mềm Proshow Producer 8.0 Full Crack Keygen Free Download
vertical-align on other elements
Technically, this CSS attribute doesn"t go on any other kinds of elements. When the novice developer applies vertical-align to normal bloông chồng elements (like a standard ) most browsers set the value lớn inherit lớn all inline children of that element.
So how do I vertically-center something?!
Method 1
The following example makes two (non-trivial) assumptions. If you can meet these assumptions, then this method is for you:
You can put the content that you want khổng lồ center inside a block & specify a fixed height for that inner content bloông xã.It"s alright to lớn absolutely-position this nội dung. (Usually fine, since the parent element inside which the nội dung is centered can still be in flow.If you can accept the above necessities, the solution is:
An example of this in code:
...Hey look! I"m vertically centered!
How sweet is this?!
In your browser, the above sầu example renders as:
Hey look! I"m vertically centered!
How sweet is this?!
Method 2
This method requires that you be able to satisfy the following conditions:
If you can accept the above necessities, the solution is:
Set the line-height of the parent element to lớn the fixed height you want.An example of this in code:
