A FAQ on various IRC channels I help out on is How vày 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, and the nội dung flows to an appropriate height based on the available width. Traditionally, horizontal sizing & layout is easy; vertical sizing và layout was derived from that.The reason vertical-align:middle isn"t doing what is desired want is because the author doesn"t underst& what it"s supposed khổng lồ vày, but …… this is because the CSS specification really screwed this one up (in my opinion)—vertical-align is used lớn specify two completely different behaviors depending on where it is used.

Bạn đang xem: Vertical-align là gì

Bạn sẽ xem: Vertical-align là gì

vertical-align in table cells

When used in table cells, vertical-align does what most people expect it lớn, which is mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets vị the same thing:

...

vertical-align on inline elements

When vertical-align is applied to inline elements, however, it"s a whole new ballgame. In this situation, it behaves like the (old, deprecated) align attribute did on
*


*

—as examples.

In this paragraph, I have two images—

*

and
*

—as examples.

In this paragraph, I have a cute little display:inline-blockvertical-align:middle and display:inline-blockvertical-align:text-bottom as an example.

Xem thêm: Đuôi Heic Là Gì ? Cách Mở Và Chuyển Đổi Sang Jpg, Png Trên Windows

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 khổng lồ normal block elements (like a standard ) most browsers phối the value lớn inherit khổng lồ 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 nội dung that you want khổng lồ center inside a bloông chồng và specify a fixed height for that inner nội dung bloông chồng.It"s alright lớn absolutely-position this content. (Usually fine, since the parent element inside which the content is centered can still be in flow.

If you can accept the above necessities, the solution is:

Specify the parent container as position:relative sầu or position:absolute.Specify a fixed height on the child container.Set position:absolute and top:1/2 on the child container khổng lồ move the top down to the middle of the parent.Set margin-top:-yy where yy is half the height of the child container lớn offset the công trình up.

An example of this in code:

...Hey look! I"m vertically centered!

How sweet is this?!

In your browser, the above example renders as:

Hey look! I"m vertically centered!

How sweet is this?!

Method 2

This method requires that you be able lớn satisfy the following conditions:

If you can accept the above necessities, the solution is:

Set the line-height of the parent element to the fixed height you want.

An example of this in code:

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *