Để đị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 css 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.

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ử »

Xem Thêm  Thủ thuật SEO: Tổng hợp 81 Tuyệt chiêu SEO web hiệu quả - thu thuat web

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ủ đề văn bản trung tâm css theo chiều dọc

CSS dimensions – Kích thước chiều rộng và chiều cao của phần tử trong CSS

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 9908 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu thuộc tính CSS cho phép tùy chỉnh kích thước chiều rộng và chiều cao của phần tử trong CSS: width, min-width, max-width, height, min-height, max-height.
    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu

    html css nguyenthithuylien

chiều ngang CSS flexbox KHÔNG xác định rõ ràng chiều cao gốc

  • Tác giả: vi.androidnetc.org
  • Đánh giá: 3 ⭐ ( 6380 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chỉ với div cha và các phần tử img con như được minh họa bên dưới, làm cách nào để căn giữa theo chiều dọc và chiều ngang của phần tử img trong khi không xác định rõ ràng chiều cao của div cha? & l …

trung tâm theo chiều dọc xoay văn bản với CSS

  • Tác giả: vi.uwenku.com
  • Đánh giá: 5 ⭐ ( 2400 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có HTML sau:

Văn bản trung tâm CSS (theo chiều ngang và chiều dọc) bên trong một khối div

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 1549 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nếu đó là một dòng văn bản và / hoặc hình ảnh, thì nó rất dễ…

Ví dụ về kiểu văn bản căn giữa, căn đều, căn phải

  • Tác giả: kiemlua24h.co
  • Đánh giá: 5 ⭐ ( 8829 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng tôi sử dụng CSS text-align thuộc tính để căn chỉnh nội dung bên trong phần tử cấp khối.Ví dụ về các phần tử cấp khối là các đoạn văn…

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á: 5 ⭐ ( 9953 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 đã…

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á: 4 ⭐ ( 9128 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é !

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