Trung tâm hình ảnh css

Mình nghĩ vấn đề không phải là khó thực hiện căn cứ giữa CSS, mà ở chỗ có rất nhiều cách thực hiện khác nhau, tùy thuộc vào vấn đề, mà cũng nên thật khó để biết cách nào là tốt nhất

Chính vì thế, hôm nay mình sẽ tổng hợp lại các kỹ thuật căn bản giữa CSS để giúp các bạn tiện tra cứu

I. Căn giữa theo chiều ngang

Căn giữa các phần tử theo chiều ngang trong CSS thì khá đơn giản

I. 1. Căn giữa các dòng nội dung hoặc căn giữa các phần tử nội tuyến

Bạn có thể căn cứ giữa các phần tử nội tuyến (văn bản hoặc liên kết. ) theo chiều ngang của phần tử cha (cấp độ khối), bằng cách đặt đoạn mã CSS phần tử cha này

Ví dụ. Căn giữa nội dung của thẻ p, hoặc thẻ a bên trong nav

Cách này sẽ hoạt động cho inline, inline-block, inline-table, inline-flex, v. v

> Lưu ý. Nếu bạn không thấy ví dụ trong Codepen thì bạn phải vào Codpen. io -> Vượt captcha -> Đăng nhập tài khoản -> Sau đó quay lại đây và nhấn F5

I. 2. Căn giữa khối phần tử

Bạn có thể căn giữa một khối phần tử bằng cách thiết lập

• margin-left và margin-right thành auto

Và lưu ý là phải thiết lập width cho nó, nếu không thì chiều rộng của nó là 100% (bằng các phần tử cha) và không cần căn giữa (Giải pháp này không áp dụng căn giữa cho nội dung bên trong nó)

Căn giữa theo cách này thường được viết tắt như thế này

Ví dụ. Căn giữa thẻ div được đặt bên trong thẻ main

Điều này sẽ hoạt động bất kể chiều rộng của khối phần tử mà bạn đang căn giữa hay phần tử cha là bao nhiêu

I. 3. Căn giữa nhiều khối phần tử

Nếu bạn có hai hoặc nhiều phần tử khối cần được căn giữa theo chiều ngang trong một hàng, bạn có thể dễ dàng thực hiện điều đó bằng cách thay đổi kiểu hiển thị (thuộc tính display)

Dưới đây là một ví dụ về việc sử dụng flexbox để căn giữa (cách làm này rất đơn giản và phổ biến nhất)

Nếu bạn vẫn muốn mỗi phần tử khối là một hàng thì sử dụng a0 vẫn tốt

II. Căn giữa theo chiều dọc

Căn giữa các phần tử theo chiều dọc trong CSS thì phức tạp hơn một chút

• Và nếu đó là phần tử inline hoặc inline-*

II. 1. Căn giữa theo chiều dọc (một dòng)

Đôi khi, phần tử nội tuyến hoặc văn bản có thể được căn giữa theo chiều dọc bằng cách sử dụng a1 bằng nhau, ví dụ

Ví dụ. Căn văn bản ở giữa theo chiều dọc của thẻ a

Nếu không sử dụng phần đệm vì một lý do nào đó, thì có một mẹo là làm cho chiều cao của dòng (a3) bằng chiều cao của phần tử đó (nếu nội dung không dài và không cần xuống dòng)

Ví dụ. Nếu phần tử có a4 thì chúng ta đặt a3 là a6 cho văn bản bên trong đó tự động vào giữa theo chiều dọc

II. 2. Căn giữa theo chiều dọc (nhiều dòng)

Phần đệm (a1) bằng nhau ở trên và dưới cũng có thể tạo hiệu ứng căn giữa cho nhiều dòng văn bản

Trong trường hợp này, bạn có thể sử dụng thuộc tính a8 cho kiểu bảng (thực tế hoặc được thay đổi hiển thị)

Nếu phần tử là bảng thì mặc định nó sẽ căn giữa ô bảng (table-cell)

Còn nếu bạn thiết lập từ CSS thì bạn cần phải chỉ định a9 như trong ví dụ sau

Nếu trong trường hợp không thể biến nó thành bảng, có lẽ bạn có thể sử dụng flexbox

Cách làm này đơn giản hơn rất nhiều

Một phần tử linh hoạt có thể được căn giữa trong một phần tử linh hoạt khá dễ dàng như sau

> Lưu ý. Nó chỉ thực sự có liên quan nếu container mẹ có chiều cao cố định (px, %, v. v. ), đó là lý do tại sao container ở đây có thiết lập chiều cao

Nếu cả hai kỹ thuật này vì lý do nào đó mà không hiệu quả, bạn có thể sử dụng thủ thuật "Amazing Gút trầm tĩnh" này

• Tạo giả có chiều cao được đặt 100% bên trong vùng chứa

• Sau đó, văn bản được căn chỉnh theo chiều dọc với nó

Nhìn chung kỹ thuật sẽ như thế này

/* Căn lưu dựa vào phần sự giả */

Ví dụ

• Còn nếu đó là cấp độ khối

II. 3. Căn giữa cấp độ khối nếu biết chiều cao

Các biến phổ biến khi không biết chiều cao trong bố cục trang web, vì nhiều lý do

• Chiều rộng thay đổi, văn bản không xuống hàng cũng có thể thay đổi chiều cao. Sự khác nhau về kiểu dáng của văn bản có thể thay đổi chiều cao

• Sự khác nhau về số lượng văn bản có thể thay đổi chiều cao

• Các phần tử có tỷ lệ khung hình cố định, như hình ảnh, có thể thay đổi chiều cao khi thay đổi kích thước
• ...

Nhưng nếu bạn đã biết chiều cao, bạn có thể căn giữa theo chiều dọc như

/* Tính đến đệm và đường viền nếu không sử dụng box-sizing. hộp viền;

Ví dụ

II. 4. Căn giữa cấp độ khối nếu không biết chiều cao

Nếu chưa biết chiều cao, bạn vẫn có thể căn giữa nó bằng cách chuyển nó lên 50% chiều cao của nó sau khi chuyển nó xuống 50%

đứng đầu. 50%;

/* Tại vị trí trí này, dịch chuyển lên trên theo chiều Y 50% */

biến đổi. dịchY(-50%);

Ví dụ

II. 4. Căn giữa block-level theo vertical với flexbox

Căn giữa theo chiều dọc một cấp độ khối rất dễ dàng với flexbox

Ví dụ

Bạn cũng có thể căn giữa trong flexbox bằng cách sử dụng nav0 trên phần tử con

III. Căn giữa theo cả chiều ngang và chiều dọc trong CSS

Bạn có thể kết hợp các kỹ thuật theo bất kỳ cách nào để có được các yếu tố chính giữa một cách hoàn hảo

Tuy nhiên, ba nhóm này là cách thường làm

III. 1. Căn giữa hoàn toàn nếu chiều rộng và chiều cao là cố định

Nếu chiều rộng và chiều cao là cố định, chúng ta có thể sử dụng lề âm bằng một nửa chiều rộng và chiều cao đó

Sau đó nav1 và dịch chuyển nav2 và nav3 để căn cứ giữa nó với sự hỗ trợ tốt trên nhiều trình duyệt

Về cơ bản là như thế này

Ví dụ

III. 2. Căn giữa hoàn toàn nếu không biết chiều rộng và chiều cao

Nếu bạn không biết chiều rộng hoặc chiều cao, bạn có thể sử dụng thuộc tính nav4 và nav5 -50% theo cả hai hướng (dựa vào chiều rộng / chiều cao hiện tại của phần tử) để căn cứ giữa

/* Dịch Chuyển 50% theo theo phần định vị trí*/

/* Dịch Chuyển ngược lại 50% theo chiều rộng và chiều cao */

biến đổi. dịch(-50%, -50%);

Ví dụ

III. 3. Căn giữa hoàn toàn với flexbox

Để căn giữa theo cả hai hướng với flexbox, bạn cần sử dụng hai thuộc tính căn giữa như thế này

Ví dụ

III. 4. Căn giữa hoàn toàn với Grid

Hoặc bạn cũng có thể sử dụng tính năng CSS GRID để căn giữa hoàn toàn

/* Thay đổi kiểu hiển thị thị thành GRID */

/* Căn lưu phần tử cần căn lưu */

Ví dụ

Total endments between CSS

Đó, đó là tất cả các kỹ thuật căn bản trong CSS mà mình nghĩ là đầy đủ để bạn sử dụng

Hi vọng nó giúp ích trong quá trình học thiết lập giao diện người dùng của bạn

> Nếu bạn yêu thích Array Front end và muốn học để đi thực tập/đi làm sớm thì hãy tham gia HỌC FRONT END ngay đi thôi

---

HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI

Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay

Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT. 02435574074 - 0383. 180086

E-mail. xin chào@niithanoi. giáo dục. vn

trang chủ. https. //Facebook. com/NIIT. CNTT-TT/

#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python