Để đị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 : css căn giữa văn bản theo chiều dọc

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  Selectors - margin là gì css

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 vị trí 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 top left thành 50% để căn giữa góc 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 theo chiều dọc văn bản 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ủ đề css văn bản ở giữa theo chiều dọc

HỌC HTML – CSS CƠ BẢN – BÀI 32 – CĂN NGANG – CĂN DỌC PHẦN TỬ SỬ DỤNG FLEX

  • Tác giả: .NetPro
  • Ngày đăng: 2021-09-27
  • Đánh giá: 4 ⭐ ( 5023 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HỌC LẬP TRÌNH HTML – CSS CƠ BẢN
    Hãy Bấm SUBSCRIBE để nhận ngay những video dạy lập trình thực chiến mới nhất từ .NetPro.
    Cảm ơn các bạn đã quan tâm theo dõi.
    Chúc các bạn học lập trình vui vẻ.

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

  • Tác giả: doanhaiblog.com
  • Đánh giá: 3 ⭐ ( 3527 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.

CSS: 8 cách để căn giữa DOM theo chiều dọc

  • Tác giả: concurrently.dev
  • Đánh giá: 5 ⭐ ( 5609 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vertical-align: Đã bao nhiêu lần bạn đã thử dùng vertical-align: middle; để thử căn giữa một DOM theo chiều dọc? Mình thì ít nhất là chục lần! Thoạt nhìn thì có vẻ logic, nhưng loay hoay một lúc thì phát hiện nó chả hoạt động gì?!

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

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 1582 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 đó…

Căn trung tâm text trong CSS đơn giản bằng mẹo dưới đây

  • Tác giả: hocban.vn
  • Đánh giá: 5 ⭐ ( 5061 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS, để căn chỉnh Text nằm giữa theo chiều ngang thì chúng ta dùng thuộc tính text-align, còn căn theo chiều dọc thì dùng vertical-align. Còn để căn trung tâm text, hay nói cách khác là căn giữa cả chiều ngang và chiều dọc thì làm như dưới đây nhé !

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

  • Tác giả: webfaver.com
  • Đánh giá: 4 ⭐ ( 9214 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ách căn giữa một phần tử bằng CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 8731 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