Đoạn mã này sẽ giúp bạn căn chỉnh phần tử

cho tất cả các trình duyệt theo chiều dọc. Bạn sẽ học cách làm điều đó từng bước với các ví dụ và giải thích của chúng tôi.

Bạn đang xem : khối div ở giữa theo chiều dọc

Tạo hộp nội dung căn giữa theo chiều dọc và chiều ngang, chiều rộng cố định, chiều cao linh hoạt là giải pháp tốt nhất để căn giữa theo chiều dọc div cho tất cả các trình duyệt. Nó sẽ hoạt động cho tất cả các phiên bản Firefox, Chrome, Opera và Safari mới nhất.

Hãy cùng cố gắng làm điều đó.

Tạo HTML

  • Đặt ba HTML & lt; div & gt; thẻ và đặt cho chúng các tên lớp “bên ngoài”, “giữa” và “nội bộ”.
 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" bên ngoài "

& gt;

& lt;

div

class

=

" middle "

& gt;

& lt;

div

class

=

" nội bộ "

& gt;

& lt;

h1

& gt;

Cách căn giữa theo chiều dọc thẻ HTML

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Tạo CSS

Hãy tạo kiểu đầu tiên & lt; div & gt;

  • Sử dụng thuộc tính CSS display với thuộc tính “table” để phần tử có thể hoạt động giống như phần tử HTML & lt; table & gt; .
  • Sử dụng thuộc tính CSS position để đặt & lt; div & gt; vị trí của phần tử. Thêm giá trị “tuyệt đối”.
  • Đặt các thuộc tính CSS top left để xác định vị trí trên cùng và bên trái của phần tử.
  • Với sự trợ giúp của các thuộc tính CSS width height , hãy đặt kích thước của & lt; div & gt; phần tử.
 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. external

{

display

: table;

vị trí

: tuyệt đối;

top

:

0

;

còn lại

:

0

;

height

:

100%

;

width

:

100%

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" bên ngoài "

& gt;

& lt;

div

class

=

" middle "

& gt;

& lt;

div

class

=

" nội bộ "

& gt;

& lt;

h1

& gt;

Cách căn giữa theo chiều dọc thẻ HTML

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Xem Thêm  Hơn 50 mẫu HTML CSS đáp ứng miễn phí cho năm 2021 - mẫu html và css

Bắt đầu tạo kiểu & lt; div & gt ;.

  • Ở đây, chúng tôi sử dụng giá trị “table-cell” của thuộc tính hiển thị, do đó bảng sẽ hoạt động giống như phần tử HTML & lt; td & gt; .
  • Đặt giá trị “middle” của thuộc tính CSS vertical-align . Nó sẽ căn chỉnh theo chiều dọc của tâm thẳng đứng của hộp với đường cơ sở của hộp chính cộng với một nửa chiều cao x của chính.
 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. middle

{

display

: table-cell;

vertical-align

: middle; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" bên ngoài "

& gt;

& lt;

div

class

=

" middle "

& gt;

& lt;

div

class

=

" nội bộ "

& gt;

& lt;

h1

& gt;

Cách căn giữa theo chiều dọc thẻ HTML

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Và cuối cùng, hãy tạo kiểu & lt; div & gt ;.

Sử dụng giá trị “tự động” mặc định của thuộc tính CSS margin-left margin-right để đặt lề trái và phải của & lt; div & gt; phần tử.

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. nội bộ

{

margin-left

: auto;

margin-right

: auto;

width

:

400px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" bên ngoài "

& gt;

& lt;

div

class

=

" middle "

& gt;

& lt;

div

class

=

"nội bộ"

& gt;

& lt;

h1

& gt;

Cách căn giữa theo chiều dọc thẻ HTML

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Xem Thêm  Giới Thiệu Tổng Quan Stored Procedure Sql Là Gì ? Procedure (Thủ Tục) Trong Sql Server - stored procedure sql là gì

Bây giờ chúng ta hãy xem kết quả.

Ví dụ về & lt; div & gt; phần tử:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. external

{

display

: table;

vị trí

: tuyệt đối;

top

:

0

;

còn lại

:

0

;

height

:

100%

;

width

:

100%

; }

. middle

{

display

: table-cell;

vertical-align

: middle; }

. nội bộ

{

margin-left

: auto;

margin-right

: auto;

width

:

400px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" bên ngoài "

& gt;

& lt;

div

class

=

" middle "

& gt;

& lt;

div

class

=

" nội bộ "

& gt;

& lt;

h1

& gt;

Cách căn giữa theo chiều dọc thẻ HTML

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Cách căn giữa theo chiều dọc thẻ HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Xem thêm những thông tin liên quan đến chủ đề khối div trung tâm theo chiều dọc

4 Quickest Ways to Center Div with CSS

  • Tác giả: Red Stapler
  • Ngày đăng: 2019-02-12
  • Đánh giá: 4 ⭐ ( 6464 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 4 quickest CSS Methods to center div on screen or other div both vertically and horizontally.
    Source code: https://redstapler.co/4-ways-to-center-div-css/
    Follow us on
    Facebook: https://www.facebook.com/theRedStapler
    Website: http://redstapler.co/
    Twitter: https://twitter.com/redStapler_twit

Cách căn chỉnh theo chiều dọc hình ảnh bên trong div