Để định vị văn bản được định vị theo chiều dọc với CSS, bạn có thể sử dụng thuộc tính vertical-align, line-height, biến đổi, flexbox. Tìm hiểu thêm các phương pháp. Hãy thử các ví dụ.

Bạn đang xem : căn giữa văn bản theo chiều dọc trong css

Căn giữa các phần tử theo chiều dọc với CSS thường gây ra rắc rối. Tuy nhiên, có một số cách căn giữa theo chiều dọc và mỗi cách đều dễ sử dụng.

Sử dụng thuộc tính vertical-align của CSS

Thuộc tính vertical-align được sử dụng để căn giữa các phần tử nội tuyến theo chiều dọc.

Các giá trị của thuộc tính vertical-align căn chỉnh phần tử so với phần tử chính của nó:

  • Giá trị dòng tương đối căn chỉnh theo chiều dọc một phần tử so với toàn bộ dòng.
  • Giá trị cho các ô trong bảng có liên quan đến thuật toán chiều cao bảng, thuật toán này thường đề cập đến chiều cao của hàng.

Ví dụ về căn chỉnh văn bản theo chiều dọc:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

display

: table-cell;

width

:

250px

;

height

:

200px

;

padding

:

10px

;

border

:

3px

dashed

# 1c87c9

;

vertical-align

: middle; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

Văn bản được căn chỉnh theo chiều dọc

& lt; / < p class = "hljs-name"> div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Văn bản được căn chỉnh theo chiều dọc

Sử dụng CSS Flexbox

Với Flexbox, có thể căn chỉnh các phần tử theo chiều dọc (hoặc theo chiều ngang) với align-items, align-self, justify-content thuộc tính.

Để tìm hiểu cách tạo bố cục linh hoạt được tối ưu hóa cho nhiều thiết bị, hãy đọc Hướng dẫn về Flexbox

Ví dụ về căn chỉnh văn bản theo chiều dọc với Flexbox:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

Phần

{

display

: flex;

width

:

50%

;

height

:

200px

;

margin

: auto;

border-radius

:

10px

;

border

:

3px

dashed

# 1c87c9

;

align-items

: center;

justify-content

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

Phần

& lt;

& gt;

& lt;

p

& gt;

Tôi tập trung vào Flexbox!

& lt; /

p

& gt;

Phần

& lt; /

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Sử dụng thuộc tính hiển thị CSS

Với thuộc tính display , chúng tôi sẽ đặt các phần tử thành “table” và “table cell”. Chúng tôi căn giữa nội dung bằng thuộc tính căn chỉnh theo chiều dọc.

Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính hiển thị CSS :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

# parent

{

display

: table;

width

:

100%

;

height

:

200px

;

border

:

3px

dashed

# 1c87c9

;

text-align

: center; }

# con

{

display

: table-cell;

vertical-align

: middle; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

id

=

" cha "

& gt;

& lt;

div

id

=

" child "

& gt;

Tôi được căn giữa theo chiều dọc

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Sử dụng thuộc tính line-height của CSS

Thêm thuộc tính line-height vào phần tử chứa văn bản lớn hơn kích thước phông chữ của nó. Theo mặc định, các khoảng trắng bằng nhau sẽ được thêm vào bên trên và bên dưới văn bản và bạn sẽ nhận được văn bản được căn giữa theo chiều dọc.

Xem Thêm  Thuộc tính HTML: chỉ đọc - HTML: Ngôn ngữ đánh dấu siêu văn bản - đầu vào văn bản html chỉ đọc

Ví dụ về căn chỉnh văn bản theo chiều dọc với CSS thuộc tính line-height:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

p

{

height

:

90px

;

line-height

:

90px

;

text-align

: center;

border

:

3px

dashed

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

& gt;

Tôi căn giữa theo chiều dọc

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ sau đây phù hợp với văn bản có một và nhiều dòng. Tuy nhiên, nó yêu cầu một thùng chứa có chiều cao cố định.

Ví dụ về căn chỉnh văn bản theo chiều dọc bằng cách sử dụng thuộc tính chiều cao dòng CSS với vùng chứa chiều cao cố định:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

div

{

display

: inline-block;

width

:

100%

;

height

:

200px

;

vertical-align

: middle;

line-height

:

200px

;

text-align

: center;

border

:

3px

dashed

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

& gt;

Tôi căn giữa theo chiều dọc

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Đặt phần đệm trên và dưới bằng nhau

Khi căn chỉnh văn bản theo chiều dọc với thuộc tính padding , chúng tôi phải đặt phần đệm trên cùng và dưới cùng của phần tử mẹ bằng nhau.

Ví dụ về căn chỉnh theo chiều dọc văn bản với thuộc tính CSS padding :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

. center

{

padding

:

10%

0

;

border

:

3px

dashed

# 1c87c9

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" center "

& gt;

& lt;

p

& gt;

Tôi căn giữa theo chiều dọc.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Khi đặt khoảng đệm, hãy sử dụng% để giúp chúng phát triển linh hoạt. Phương pháp này yêu cầu một số phép tính để hiểu những giá trị nào là cần thiết ở trên cùng và dưới cùng, để chúng có thể phát triển một cách linh hoạt. Nếu bạn đặt chiều cao thành “tương đối”, bạn sẽ không cần tính toán.

Đặt định vị tuyệt đối và lề âm

Chúng tôi có thể căn chỉnh văn bản theo chiều dọc với các thuộc tính CSS vị trí margin được sử dụng với các phần tử cấp khối. Đừng quên đặt chiều cao của phần tử mà bạn muốn căn giữa.

  1. Đặt vị trí thành “tương đối” cho lớp “cha” và “tuyệt đối” cho lớp “con_1” và “con_2”.
  2. Đặt cả hai thuộc tính trên cùng left thành 50% để căn giữa góc bên trái của phần con & lt; div & gt; .
  3. Đặt chiều rộng chiều cao của con & lt; div & gt; theo một cách nào đó để nó sẽ được di chuyển lên trên và sang trái.
  4. Đặt một lề âm, làm giảm một nửa chiều cao và chiều rộng.

Ví dụ về căn chỉnh văn bản theo chiều dọc với vị trí CSS và thuộc tính lề:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

. parent

{

vị trí

: tương đối;

width

:

100%

;

height

:

220px

;

background

:

# 1faadb

;

color

:

# fff

; }

. child_1

,

. child_2

{

vị trí

: tuyệt đối;

top

:

50%

;

còn lại

:

50%

;

width

:

110px

;

height

:

70px

;

background

:

# 8ebf42

;

text-align

: center; }

. child_1

{

margin

: -

35px

0

0

-

55px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" cha "

& gt;

& lt;

div

class

=

" child_1 "

& gt;

Văn bản được căn giữa theo chiều dọc

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

br

/ & gt;

& lt;

div

class

=

" cha "

& gt;

& lt;

div

class

=

" child_2 "

& gt;

Văn bản không được Căn giữa

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Nếu nội dung vượt quá vùng chứa, nội dung đó sẽ biến mất một cách trực quan.

Đặt định vị và kéo giãn tuyệt đối

Bằng cách đặt định vị và độ giãn tuyệt đối, chúng tôi hướng dẫn trình duyệt tự động đặt các lề của phần tử con để chúng trở nên bằng nhau.

  1. Đặt vị trí cho cấp độ gốc thành “tương đối” và đối với cấp độ con, đặt vị trí đó thành “tuyệt đối”.
  2. Đặt thuộc tính trên cùng, dưới cùng , bên trái và bên phải cho trẻ.
  3. Đặt lề thành “auto” để làm cho tất cả các lề bằng nhau và đặt con & lt; div & gt; được căn giữa theo chiều dọc cũng như chiều ngang.

Ví dụ về căn chỉnh theo chiều dọc văn bản với thuộc tính CSS position :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

. parent

{

vị trí

: tương đối;

text-align

: center;

height

:

300px

;

background-color

: lightblue; }

. con

{

vị trí

: tuyệt đối;

top

:

0

;

bottom

:

0

;

còn lại

:

0

;

đúng

:

0

;

width

:

50%

;

height

:

10%

;

margin

: auto;

font-size

:

20px

;

line-height

:

28px

;

padding

:

10px

;

background-color

: màu hồng; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" cha "

& gt;

& lt;

div

class

=

" child "

& gt;

Ví dụ

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Đặt thuộc tính biến đổi CSS

Khi chúng ta có vị trí: tuyệt đối, trên cùng: 50%, trái: 50%, các phép tính được thực hiện bắt đầu từ góc trên bên trái. Để định vị văn bản ở trung tâm, chúng tôi phải “di chuyển” văn bản sang trái -50% và tăng 50% bằng cách thiết lập biến đổi: dịch (-50%; – 50%).

Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính CSS biến đổi :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

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

& lt; /

title

& gt;

& lt;

style

& gt;

. parent

{

vị trí

: tương đối;

width

:

100%

;

height

:

220px

;

background

:

# 1faadb

;

color

:

# fff

; }

. child_1

,

. child_2

{

vị trí

: tuyệt đối;

top

:

50%

;

còn lại

:

50%

;

width

:

90px

;

height

:

90px

;

padding

:

5px

;

background

:

# 8ebf42

;

text-align

: center; }

. child_1

{

biến đổi

:

dịch

(-

50%

, -

50%

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" cha "

& gt;

& lt;

div

class

=

" child_1 "

& gt;

Văn bản được căn giữa theo chiều dọc

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

br

/ & gt;

& lt;

div

class

=

" cha "

& gt;

& lt;

div

class

=

" child_2 "

& gt;

Văn bản không được Căn giữa

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Sử dụng floater div

Việc sử dụng phương thức div của floater yêu cầu phải có & lt; div & gt ;, rỗng.

  1. Đặt thuộc tính float thành “left”.
  2. Đặt chiều cao thành 50%.
  3. Xóa con & lt; div & gt; bằng cách sử dụng thuộc tính clear .
  4. Đặt margin-bottom âm trên floater & lt; div & gt ;.

Hãy nhớ có & lt; div & gt; và đặt chiều cao của phần tử con.

Ví dụ về căn chỉnh văn bản theo chiều dọc với thuộc tính float CSS :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

style

& gt;

# parent

{

height

:

300px

;

border

:

1px

solid

# 1c87c9

; }

# floater

{

float

: left;

width

:

100%

;

height

:

50%

;

margin-bottom

: -

50px

; }

# con

{

clear

: cả hai;

height

:

100px

;

background

:

# 8ebf42

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Ví dụ về văn bản được căn chỉnh theo chiều dọc với thuộc tính float CSS:

& lt; /

h1

& gt;

& lt;

div

id

=

" cha "

& gt;

& lt;

div

id

=

" floater "

& gt;

& lt; /

div

& gt;

& lt;

div

id

=

" child "

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề văn bản chính giữa theo chiều dọc trong css

Kỷ Nguyên 4.0 | Cấu trúc cơ bản của hệ thống truyền lực tự động điện

  • Tác giả: Kỷ Nguyên 4.0
  • Ngày đăng: 2022-06-18
  • Đánh giá: 4 ⭐ ( 8849 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cùng Kỷ Nguyên 4.0 tìm hiểu về hệ thống truyền lực tự động điện trên ô tô nhé
    truyenluc oto

Văn bản được xoay ở giữa theo chiều dọc với CSS

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9186 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Điều quan trọng là đặt vị trí trên cùng và sang trái thành 50%, sau đó…

Một số cách căn giữa phần tử theo chiều dọc trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 8831 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn, với Front-end thì việc căn phần tử theo trái/phải/trên/dưới là chuyện như cơm bữa. Việc căn phần tử theo chiều ngang thì có vẻ suôn sẻ, vậy còn theo chiều dọc thì sao ? liệu bạn đã…

Canh giữa theo cả chiều ngang và dọc trong CSS

  • Tác giả: webfaver.com
  • Đánh giá: 5 ⭐ ( 3740 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách canh giữa mọi thứ theo cả chiều dọc và chiều ngang bằng CSS, có thể áp dụng cho mọi loại element, layout,…

Căn giữa CSS 2 chiều: Hướng dẫn đầy đủ

  • Tác giả: doanhaiblog.com
  • Đánh giá: 4 ⭐ ( 6825 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn giữa CSS 2 chiều – Khi làm việc với CSS, chúng tôi nghĩ về các phần tử trang là các hộp và cách sắp xếp các hộp này thể hiện khái niệm về bố cục CSS.

Canh giữa theo chiều dọc CSS

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 6724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Căn giữa theo chiều ngang trong CSS: hướng dẫn toàn diện

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 3673 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php