Căn ảnh ra giữa trong html

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.

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!

h2, 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>
Centering with CSSh2>
Text-Align Methodh3>
div>div>
Margin tự động Methodh3>
div>
Absolute Positioning Methodh3>
div>body>html>

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à:

1. 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]
2. Đặt “text-align:center” vào phần tử cha
3. 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ể loạ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ớ:

1. Đặt vị trí phần tử với thuộc tính vị trí tuyệt đối
2. Thêm thuộc tính “left:50%” vào phần tử
3. Đặ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]

.red-squarebackground-color: #FF4136;width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform:translate[-50%, -50%];style>head>
div>body>html>

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, bodyheight: 100%;.purple-square-containerheight: 100%;display: flex;align-items: center;justify-content: center;.purple-squarebackground-color: #B10DC9;width: 300px;height: 300px;style>head>
div>div>body>html>

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à:

1. HTML, body hay phần tử cha phải đặt chiều cao là 100%.
2. Đặt “display: flex;” cho phần tử cha.
3. Đặt “align-items: center;” cho phần tử cha.
4. Đặt “justify-content: center;” căn đều 2 bên vào giữa phần tử bao gói cha.

Tôi cũng like sử dụng phương pháp này, nó đều thoả mãn responsive và lại k cần tính toán margin.

Tôi mong rằng bạn thấy bài này khai sáng và giúp đỡ bạn. Tôi luôn mong đón nhận những ý kiến feedback nhé! 😀

nguồn: techmaster.vn