TRENDING
Hoclamweb.com.vn
  • Trang Chủ
  • Case Study làm web
  • Khóa học làm web
  • Kiến thức kinh doanh
  • Kiến thức SEO web
  • Plugin cho website
  • Trang Chủ
  • Case Study làm web
  • Khóa học làm web
  • Kiến thức kinh doanh
  • Kiến thức SEO web
  • Plugin cho website
Trang chủ Thiết kế trang web

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

Bởi ATPMedia
22/11/2019
Căn Giữa Hình ảnh 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.

Căn Giữa Hình ảnh Trong Html

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>

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

  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)

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

red-square-centerCă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>

pink-square-centerCă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à:

  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

Liên QuanBài Viết

Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?
Kiến thức Website

Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?

26/12/2022
Thiết kế website chuyên nghiệp cao cấp chuẩn UX/UI tại Miko Tech
Thiết kế trang web

Thiết kế website chuyên nghiệp cao cấp chuẩn UX/UI tại Miko Tech

22/02/2022
Đơn vị thiết kế website bán hàng chuyên nghiệp, chuẩn SEO
Thiết kế trang web

Đơn vị thiết kế website bán hàng chuyên nghiệp, chuẩn SEO

03/08/2021
Tu Thiet Ke Website C27f9d7ba4744637aeaa95764247ce9c
Thiết kế trang web

Cách tạo web cá nhân trên Google miễn phí và chuyên nghiệp

11/03/2021
Thiet Ke Web Theo Yeu Cau Gia Re 2 (1)
Thiết kế trang web

Thiết kế web theo yêu cầu giá rẻ tại Bizfly Smart Web có gì tốt?

11/03/2021
Bai Web1
Kĩ năng nghề nghiệp

Hướng dẫn tích hợp Chat Facebook vào Landing Page

24/09/2020
Bài Viết Tiếp Theo
Lỗi Outlook Không Nhận được Mail

Tổng hợp lỗi outlook không nhận được mail mới nhất 2020

Bài Viết Mới

Giá thiết kế app là bao nhiêu? Cách xác định chi phí viết app cho doanh nghiệp

Giá thiết kế app là bao nhiêu? Cách xác định chi phí viết app cho doanh nghiệp

20/03/2023
Download WinRAR full crack miễn phí chỉ tại ITQNU.VN    

Download WinRAR full crack miễn phí chỉ tại ITQNU.VN    

13/03/2023
Máy tính – máy in Hoàng Hà – nơi cung cấp dịch vụ đổ mực máy in giá rẻ, chất lượng 

Máy tính – máy in Hoàng Hà – nơi cung cấp dịch vụ đổ mực máy in giá rẻ, chất lượng 

09/01/2023
Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?

Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?

26/12/2022
Kinh nghiệm chọn máy chủ cho các website học trực tuyến

Kinh nghiệm chọn máy chủ cho các website học trực tuyến

22/12/2022
Cần thuê nhà trọ TP.HCM tìm ở đâu? Top nhà trọ uy tín giá từ 1 – 3tr

Cần thuê nhà trọ TP.HCM tìm ở đâu? Top nhà trọ uy tín giá từ 1 – 3tr

25/11/2022

Bài viết mới

  • Giá thiết kế app là bao nhiêu? Cách xác định chi phí viết app cho doanh nghiệp
  • Download WinRAR full crack miễn phí chỉ tại ITQNU.VN    
  • Máy tính – máy in Hoàng Hà – nơi cung cấp dịch vụ đổ mực máy in giá rẻ, chất lượng 
  • Thiết kế website nội thất: Những tính năng quan trọng bắt buộc phải có?
  • Kinh nghiệm chọn máy chủ cho các website học trực tuyến

HỌC LÀM WEB

Hoclamweb.com.vn là một website tổng hợp kiến thức làm web cho người mới bắt đầu, chia sẻ về kiến thức làm web, plugin hỗ trợ thiết kế web, kiến thức SEO cho website đầy đủ nhất.

Chuyên mục

  • Case Study
  • Tài Liệu PDF
  • Kiến Thức SEO
  • Plugin Cho Website
  • Khóa Học Làm Web
  • Kiến Thức Kinh Doanh

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí
  • Cách khai báo sitemap

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang Chủ
  • Case Study làm web
  • Khóa học làm web
  • Kiến thức kinh doanh
  • Kiến thức SEO web
  • Plugin cho website

Hoclamweb.com.vn là một website tổng hợp kiến thức làm web cho người mới bắt đầu, cổng thông tin về kiến thức làm web, plugin hỗ trợ thiết kế web, kiến thức SEO cho website đầy đủ nhất.