Cách di chuyển hình ảnh theo chiều dọc trong HTML

Đã bao nhiêu lần bạn phải Google 'cách căn giữa hình ảnh trong CSS'? . Do đó, tôi muốn tạo một đoạn trích về tất cả các cách bạn có thể căn giữa hình ảnh trong CSS

Mục đích của bài đăng đoạn trích là để bạn có thể lấy mã ở đầu bài đăng. Điều này sẽ cho phép bạn nhanh chóng cắt và dán mã bạn cần để căn giữa các hình ảnh CSS

Đối với đoạn mã này, chúng tôi sẽ đề cập đến HTML bên dưới

HTML

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

Trung tâm hình ảnh CSS theo chiều ngang

Hiện tại với hình ảnh CSS, có ba cách để căn giữa hình ảnh theo chiều ngang. Tôi sẽ giới thiệu ba cách, ưu điểm và nhược điểm của từng cách để bạn có thể căn giữa hình ảnh bằng CSS trong mọi tình huống

Căn giữa hình ảnh CSS với căn chỉnh văn bản

CSS

.center {
  text-align: center;
}

Điều quan trọng cần lưu ý với phương pháp này là thuộc tính

.center {
  display: block;
  margin: auto;
  width: 50%;
}

6 chỉ hoạt động trên các phần tử cấp khối

Căn giữa hình ảnh CSS có lề

CSS

.center {
  display: block;
  margin: auto;
  width: 50%;
}

Căn giữa hình ảnh với

.center {
  display: block;
  margin: auto;
  width: 50%;
}

7 là một cách tuyệt vời để hoàn thành công việc. Tuy nhiên, bạn cần đảm bảo nó được sử dụng với hai thuộc tính khác

Đầu tiên là

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />



div>

0 vì thuộc tính

.center {
  display: block;
  margin: auto;
  width: 50%;
}

7 chỉ hoạt động trên các phần tử cấp khối. Vì, các phần tử

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

2 là các phần tử nội tuyến, bạn sẽ cần chuyển đổi chúng thành các phần tử cấp khối

Thuộc tính thứ hai là thuộc tính

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

3. Để các lề di chuyển vào giữa, bạn cần đảm bảo có khoảng trống. Do đó, bạn phải đặt

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

3 nhỏ hơn 100%

Căn giữa hình ảnh CSS theo chiều ngang với Flex

CSS

.img-container {
  display: flex;
  justify-content: center;
}

.img {
  width: 50%;
}

Đặt vùng chứa chính của hình ảnh thành

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

5 cho phép bạn căn giữa hình ảnh theo chiều ngang. Để di chuyển hình ảnh vào giữa vùng chứa, bạn phải chỉ định thuộc tính

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

6 có giá trị là

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />



div>

7

Giống như phương pháp căn giữa lề theo chiều ngang, bạn cần đảm bảo rằng bạn đặt hình ảnh nhỏ hơn 100% chiều rộng của vùng chứa chính

Chỉ cần lưu ý với phương pháp này rằng mọi thứ khác trong vùng chứa chính sẽ được căn giữa theo chiều ngang

Được rồi, ba phương pháp đó sẽ cho phép bạn căn giữa bất kỳ hình ảnh nào theo chiều ngang. Hãy xem cách căn giữa hình ảnh theo chiều dọc

Trung tâm hình ảnh CSS theo chiều dọc

Đáng chú ý với hình ảnh CSS, có hai cách chính để căn giữa hình ảnh theo chiều dọc. Tôi sẽ xem xét hai cách, ưu điểm và nhược điểm của từng cách để bạn có thể căn giữa hình ảnh theo chiều dọc bằng CSS trong một tình huống

Trung tâm hình ảnh CSS với vị trí tuyệt đối

CSS

.center {
  text-align: center;
}

1

Để căn giữa hình ảnh CSS theo chiều dọc, bạn có thể sử dụng thuộc tính

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

8 với giá trị tuyệt đối trên phần tử

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

9. Điều đầu tiên bạn cần làm là đặt vùng chứa chính có giá trị vị trí là

.center {
  text-align: center;
}

0. Đây là điều bắt buộc và bạn có thể tìm hiểu lý do tại sao trong hướng dẫn cực kỳ đơn giản của tôi về thuộc tính vị trí

Tiếp theo, bạn đặt thuộc tính

.center {
  text-align: center;
}

1 và

.center {
  text-align: center;
}

2 thành 50%. Điều này có nghĩa là bạn sắp xếp các cạnh bên trái và trên cùng của hình ảnh với trung tâm của trình duyệt. Tuy nhiên, điều này thực sự làm cho hình ảnh có vẻ lệch tâm

Do đó, bạn sử dụng thuộc tính

.center {
  text-align: center;
}

3 với phương pháp

.center {
  text-align: center;
}

4 để di chuyển div -50% dọc theo trục x và y. Điều này sẽ có hình ảnh được căn chỉnh độc đáo với tâm dọc của vị trí phần tử gốc trên trang

Căn giữa hình ảnh CSS theo chiều dọc với Flex

CSS

.center {
  text-align: center;
}

9

Cũng giống như căn giữa theo chiều ngang, chúng ta có thể căn giữa hình ảnh bằng flex-box. Lần này để di chuyển hình ảnh vào giữa vùng chứa, bạn phải chỉ định thuộc tính

.center {
  text-align: center;
}

5 có giá trị là

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

7

Giống như phương pháp căn giữa lề theo chiều ngang, bạn cần đảm bảo rằng bạn đặt hình ảnh nhỏ hơn 100% chiều rộng của vùng chứa chính

Một lần nữa, với phương pháp này, mọi thứ khác trong vùng chứa chính sẽ được căn giữa theo chiều dọc

Trung tâm hình ảnh CSS theo chiều dọc và chiều ngang

Cho đến nay chúng ta đã thấy cách căn giữa một hình ảnh CSS theo chiều ngang hoặc chiều dọc. Nhưng, chúng tôi chưa thấy làm thế nào để làm cả hai cùng một lúc

Hãy xem cách canh giữa hình ảnh theo chiều ngang và chiều dọc cùng một lúc

CSS

.center {
  display: block;
  margin: auto;
  width: 50%;
}

2

Chúng ta có thể sử dụng flex-box để căn giữa hình ảnh theo chiều ngang và chiều dọc. Để làm như vậy, chúng ta phải sử dụng cả thuộc tính

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

6 và

.center {
  text-align: center;
}

5 trên vùng chứa chính của hình ảnh. Tất cả những gì chúng ta phải làm sau đó là cung cấp cho chúng cả giá trị của

<div class="img-container">
  <img class="lazyload .center" src="path/to/image" />
div>

7 và lắc chú của bạn, hình ảnh đó được căn giữa theo cả chiều ngang và chiều dọc

Đây là những phương pháp phổ biến nhất để căn giữa hình ảnh theo cả chiều ngang và chiều dọc trong CSS. Trong hầu hết các trường hợp, điều này là đủ để bạn đưa hình ảnh của mình đến vị trí bạn muốn trên trang. Tất nhiên là có những phương pháp khác và tôi muốn bạn gửi tin nhắn trực tiếp cho tôi trên twitter để cho tôi biết chúng là gì