Đoạn mã này sẽ giúp bạn căn chỉnh phần tử
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 và 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 và 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ử »
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 và 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ử »
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
- Tác giả: vie.cambridgecableservice.com
- Đánh giá: 5 ⭐ ( 4415 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Làm thế nào bạn có thể căn chỉnh một hình ảnh bên trong một div có chứa? Ví dụ Trong ví dụ của tôi, tôi cần căn giữa theo chiều dọc
bên trong
với class = “frame”:By ads_php