Hướng dẫn căn giữa hình ảnh trong html mới nhất 2020

Căn giữa hình ảnh trong html là một trong những keyword được search nhiều nhất trên Google về chủ đề căn giữa hình ảnh trong html. Trong bài viết này, hoclamweb.vn sẽ viết bài viết Hướng dẫn căn giữa hình ảnh trong html mới nhất 2020.

Hướng dẫn căn giữa hình ảnh trong html mới nhất 2020

Nếu bạn mới chỉ bắt đầu trên con đường sự nghiệp coding, và may mắn sao tôi lại có được sự chú ý của bạn trong vài phút…hãy lưu ngay post này lại nhé!Hãy thành thật với nhau nhé.

đôi lúc trải qua quãng đời coding, chúng ta chợt nhận ra nhiều lúc quá mệt mỏi với việc căn giữa mọi thứ (tìm hướng dẫn căn giữa thẻ div nằm trong 1 thẻ div không giống trên Google hay Stack Overflow).

Nó đủ sức chỉ là một việc giản đơn, nhưng lại nhanh chóng trở thành nỗi mệt mỏi khi bạn thêm nhiều phần tử hay định hình cho trang của mình.

Do đây cũng là một vấn đề khá bình thường, tôi biên soạn ra đây 1 danh mục các phương pháp căn giữa với CSS. Tôi cũng đang phù hợp các thẻ nhúng/đường liên kết với mỗi ví dụ trên CodePen. Hãy thoải mái chia sẻ chúng nhé!

k dài dòng hơn nữa, chiến thôi nào!

<html><head><style type="text/css">h1, h3text-align: center;.blue-square-containertext-align: center;.blue-squarebackground-color: #0074D9;width: 100px;height: 100px;display: inline-block;.yellow-squarebackground-color: #FFDC00;width: 100px;height: 100px;margin: 0 tự động;.green-squarebackground-color: #3D9970;width: 100px;height: 100px;position: absolute;left: 50%;margin-left: -50px;style>head><body><h1>Centering with CSSh1><h3>Text-Align Methodh3><div class="blue-square-container"><div class="blue-square">div>div><h3>Margin tự động Methodh3><div class="yellow-square">div><h3>Absolute Positioning Methodh3><div class="green-square">div>body>html>

Căn giữa với Căn chữ, Lề tự động và Vị trí tuyệt đối

bí quyết căn chữ

sử dụng “text-align:center” có lẽ là phương pháp phổ biến nhất để bạn căn giữa. Nó sử dụng để căn giữa chữ trong trang HTML của bạn, nhưng nó cũng đủ nội lực căn giữa cả thẻ div luôn đó.

tips ở đây là:

Bao gói thẻ div mà bạn muốn căn giữa trong một phần tử cha (hay còn gọi là một wrapper hay container)
Đặt “text-align:center” vào phần tử cha
Sau đó đặt bên trong thẻ div tính chất “display: inline-block”

Trong ví dụ của tôi với ảnh vuông màu xanh da trời, Tôi gói nó vào 1 thẻ div khác đặt tên là “blue-square-container”. Để đủ sức căn giữa ảnh vuông màu xanh da trời, tôi phải tạo một phần tử cha và đặt thuộc tính hiển thị của ảnh vuông màu xanh da trời là “inline-block”.

Đó là bởi vì mặc định một thẻ div sẽ hiển thị với thuộc tính “block”, nghĩa là nó sẽ giãn ra bằng cả chiều rộng của trang. Bằng mẹo đặt thuộc tính hiển thị thành “inline-block”, chúng ta sẽ tất nhiên rằng nó chỉ có chiều rộng mà ta đang đặt, ở đây là 100px.

Thêm bao nhiêu phần tử con vào trong phần tử cha (những hình vuông màu xanh da trời trong ví dụ) đều sẽ căn giữa chúng hết.

bí quyết căn lề auto

Một phương thức không khó khăn không giống đó là dùng cách thức căn lề auto. dùng nó ta sẽ không cần đến phần tử cha.

Chúng ta đủ nội lực không khó khăn chỉ thêm tính chất “margin: 0 auto” cho hình vuông màu vàng, miễn là chúng ta đặt cho nó một chiều rộng đang định.“margin: 0 auto” là hướng dẫn viết tắt để đặt margin top và bottom là 0, và margin left và right là tự động.

Điều này vô cùng cần thiết, bởi nếu k đặt chiều rộng là 100px, thì trình duyệt sẽ không thể biết được mà chia margin left và right cho thêm vào để căn giữa hình vuông màu vàng.

Phần “0” trong thuộc tính có thể đặt tùy ý theo số pixel mà bạn muốn đặt cho top và bottom margin.

Một tips hay nữa là chỉ cần đặt “margin-left: auto” hay “margin-right: auto” là chúng ta đủ sức đẩy thẻ div về phía phải hay trái hoàn toàn (thử đi nhé!)

công thức vị trí tuyệt đối

Đặt một phần tử với vị trí tuyệt đối cho phép chúng đặt phần tử đó ở bất kì chỗ nào trên trang…với một điểm bất lợi.

Vị trí tuyệt đối loại bỏ phần tử khỏi thể loại chảy của trang web.

vì sao điều này lại quan trọng?

Bởi vì rằng nó sẽ gây chồng lấn các phần tử với nhau nếu dùng không đúng phương pháp.

Nếu chúng ta chỉ mong muốn đơn giản căn giữa một phần tử theo chiều ngang của trang như là phương pháp chúng ta làm với 2 phương thức trên, có 3 bước nên ghi nhớ:

Đặt vị trí phần tử với thuộc tính vị trí tuyệt đối
Thêm thuộc tính “left:50%” vào phần tử
Đặt margin left bằng một nửa chiều rộng phần tử

Trong ví dụ, chúng ta sử dụng một ảnh vuông màu xanh lá cây (đẹp xuất sắc). Nó có click thước giống như các ví dụ khác là 100px.

như bạn đã thấy, tôi thêm tính chất “position: absolute” và “left:50%” vào hình vuông màu xanh. Nó sẽ chỉ cho trình duyệt di chuyển lề trái dịch 50% về bên phải.

Nhưng nếu tôi tạo lại gợi ý, và ta không muốn để lề trái vào chính giữa, mà chính giữa của hình vuông sẽ thẳng hàng với chính giữa trang web.

Điều này sẽ kéo ta tới bước cuối cùng. Để thẳng hàng mọi thứ và thêm khoảng trắng, ta sẽ áp một “margin-left” bằng nửa chiều rộng của ảnh vuông màu xanh. Trong trường hợp này là 50px (theo chiều rộng của phần tử, mãi mãi là một nửa)

<html><head><style type="text/css">.red-squarebackground-color: #FF4136;width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform:translate(-50%, -50%);style>head><body><div class="red-square">div>body>html>

Căn giữa với Transform/Translate

phương thức Transform/Translate

Cho tới lúc này ta mới tìm hiểu cách để căn giữa mọi thứ theo chiều ngang, nhưng nếu chúng ta muốn đặt nó chính giữa 2 chiều của trang thì sao?

Hãy thử căn giữa theo cả chiều dọc lẫn chiều ngang nhìn thấy sao.

Do bí quyết này cũng dùng vị trí tuyệt đối và “left:50%” tôi đã thêm 2 tính chất nữa vào trong phần tử.

Bằng cách đặt tính chất top là “50%”, tôi chỉ cho trình duyệt căn thẳng viền trên của hình vuông màu đỏ vào giữa trang theo chiều dọc. Nhưng giống như gợi ý trước, chúng ta không mong muốn viền được căn giữa mà là tâm của hình vuông vào giữa trang.

Đây là phương pháp chúng ta áp dụng một thuộc tính mới đó là “transform”.

Sẽ có nhiều nhiều trò hay mà bạn đủ sức sử dụng với transform, như là tịnh tiến, xoay hay cân chỉnh hiệu ứng động, nhưng trong ví dụ này chúng ta sẽ dùng tịnh tiến.

Chúng ta thêm thuộc tính cho transform “transform: translate(-50%,-50%)” và a lê hấp!

hình vuông màu đỏ đã căn giữa theo cả chiều ngang lẫn chiều dọc.

Tôi vô cùng like sử dụng bí quyết này bởi mặc cho chiều rộng hay cao của phần tử là bao nhiêu nó đều sẽ được căn giữa vào trang.

phương thức này thường được sử dụng trong design responsive và không cần đặt margin giống như là mẹo vị trí tuyệt đối

công thức Flexbox

<html><head><phong cách type="text/css">html, bodyheight: 100%;.purple-square-containerheight: 100%;display: flex;align-items: center;justify-content: center;.purple-squarebackground-color: #B10DC9;width: 300px;height: 300px;style>head><body><div class="purple-square-container"><div class="purple-square">div>div>body>html>

Căn giữa với Flexbox

Nếu bạn chưa quen với Flexbox, cũng không sao cả! Flexbox là một module layout giúp chúng ta đơn giản căn chỉnh và đặt các phần tử trong trang web.

Nếu bạn cảm thấy hứng thú với việc học Flexbox (khuyên chân tình học đê), Flexbox Froggy là một ngành hào hứng và siêu vui để học (không ép buộc gì đâu chỉ là tôi vừa mới từng học về Flexbox và vừa mới iu em nó mất rồi).

Có 4 bước để căn giữa cả ngang lẫn dọc với Flexbox là: