Hình ảnh trung tâm sử dụng văn bản trung tâm căn chỉnh?

Là tài sản text-align: center;một cách tốt để tập trung hình ảnh bằng CSS?

img {
    text-align: center;
}

Điều đó sẽ không hoạt động vì thuộc text-aligntính áp dụng cho các container khối, không phải các phần tử nội tuyến và imglà một phần tử nội tuyến. Xem thông số kỹ thuật của W3C .

Sử dụng cái này thay thế:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Điều đó không phải lúc nào cũng hoạt động ... nếu không, hãy thử:

img {
    display: block;
    margin: 0 auto;
}

Tôi đã xem qua bài đăng này , và nó đã làm việc cho tôi:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Căn dọc và ngang)

Một cách khác để làm điều đó sẽ tập trung vào một đoạn kèm theo:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Bạn có thể làm:

<center><img src="..." /></center>

Trên thực tế, vấn đề duy nhất với mã của bạn là text-alignthuộc tính áp dụng cho văn bản (có, hình ảnh được tính là văn bản) bên trong thẻ. Bạn sẽ muốn đặt một spanthẻ xung quanh hình ảnh và đặt kiểu của nó thành text-align: center, như vậy:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

Hình ảnh sẽ được căn giữa. Để trả lời câu hỏi của bạn, đây là cách dễ nhất và dễ hiểu nhất để căn giữa hình ảnh, miễn là bạn nhớ áp dụng quy tắc cho hình ảnh chứa span(hoặc div).

Có ba phương pháp để căn giữa một yếu tố mà tôi có thể đề xuất:

1. Sử dụng text-aligntài sản

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích

2. Sử dụng margintài sản

   img {
       display: block;
       margin: 0 auto;
   }

   <img src="https://placehold.it/60/60" />

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích

3. Sử dụng positiontài sản

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích

Phương thức thứ nhất và thứ hai chỉ hoạt động nếu cha mẹ ít nhất rộng bằng hình ảnh. Khi hình ảnh rộng hơn cha mẹ của nó, hình ảnh sẽ không ở giữa !!!

Nhưng: Phương pháp thứ ba là một cách tốt cho điều đó!

Đây là một ví dụ:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Chỉ khi bạn cần hỗ trợ các phiên bản Internet Explorer cổ.

Cách tiếp cận hiện đại là làm margin: 0 autotrong CSS của bạn.

Ví dụ ở đây: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

Vấn đề duy nhất ở đây là chiều rộng của đoạn phải giống với chiều rộng của hình ảnh . Nếu bạn không đặt chiều rộng cho đoạn văn, nó sẽ không hoạt động, bởi vì nó sẽ giả định 100% và hình ảnh của bạn sẽ được căn trái, trừ khi bạn sử dụng text-align:center.

Hãy thử Fiddle và thử nghiệm với nó nếu bạn muốn.

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Nếu bạn đang sử dụng một lớp với một hình ảnh thì sau đây sẽ làm

class {
    display: block;
    margin: 0 auto;
}

Nếu nó chỉ là một hình ảnh trong một lớp cụ thể mà bạn muốn căn giữa, thì sau đây sẽ làm:

class img {
    display: block;
    margin: 0 auto;
}

Trên hộp chứa hình ảnh, bạn có thể sử dụng CSS 3 Flexbox để căn giữa hình ảnh một cách hoàn hảo, cả theo chiều dọc và chiều ngang.

Giả sử bạn có <div class = "container"> làm chủ sở hữu hình ảnh:

Sau đó, như CSS bạn phải sử dụng:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

Và điều này sẽ làm cho tất cả nội dung của bạn bên trong div này hoàn toàn tập trung.

Giải pháp đơn giản nhất tôi tìm thấy là thêm phần tử này vào phần tử img của mình:

style="display:block;margin:auto;"

Có vẻ như tôi không cần thêm "0" trước "tự động" theo đề xuất của người khác. Có lẽ đó là cách thích hợp, nhưng nó hoạt động đủ tốt cho mục đích của tôi mà không có "0". Ít nhất là trên Firefox, Chrome và Edge mới nhất .

Đơn giản chỉ cần thay đổi căn chỉnh cha mẹ :)

Hãy thử cái này trên thuộc tính cha mẹ:

text-align:center

Bạn có thể sử dụng text-align: centertrên cha mẹ và thay đổi imgthành display: inline-block→ do đó nó hoạt động giống như một thành phần văn bản và sẽ được căn giữa nếu cha mẹ có chiều rộng!

img {
    display: inline-block
}

Tôi sẽ sử dụng một div để căn giữa một hình ảnh. Như trong:

<div align="center"><img src="your_image_source"/></div>

Nếu bạn muốn đặt hình ảnh làm nền, tôi đã có một giải pháp:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Để căn giữa một hình ảnh không nền phụ thuộc vào việc bạn muốn hiển thị hình ảnh dưới dạng nội tuyến (hành vi mặc định) hoặc thành phần khối.

Trường hợp nội tuyến

Nếu bạn muốn giữ hành vi mặc định của thuộc tính CSS hiển thị của hình ảnh, bạn sẽ cần phải bọc hình ảnh của mình bên trong một thành phần khối khác mà bạn phải đặt text-align: center;

Trường hợp của khối

Nếu bạn muốn coi hình ảnh là một thành phần khối của riêng mình, thì thuộc text-aligntính không có ý nghĩa và thay vào đó bạn nên làm điều này:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Câu trả lời cho câu hỏi của bạn:

Là thuộc tính văn bản-align: centre; một cách tốt để tập trung hình ảnh bằng CSS?

Có và không.

• Có, nếu hình ảnh là thành phần duy nhất bên trong trình bao bọc của nó.
• Không, trong trường hợp bạn có các yếu tố khác trong trình bao bọc của hình ảnh vì tất cả các thành phần con là anh chị em của hình ảnh sẽ thừa hưởng thuộc text-aligntính: và có thể bạn sẽ không thích hiệu ứng phụ này.

Người giới thiệu

1. Danh sách các yếu tố nội tuyến
2. Điều trung tâm

Một cách nữa để chia tỷ lệ - hiển thị nó:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

Sử dụng điều này cho imgCSS của bạn :

img {
  margin-right: auto;
  margin-left: auto;
}

display: blockvới tôi margin: 0đã không làm việc, không bao bọc với một text-align: centeryếu tố.

Đây là giải pháp của tôi:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX được hầu hết các trình duyệt hỗ trợ

Tôi phát hiện ra rằng nếu tôi có một hình ảnh và một số văn bản bên trong a div, thì tôi có thể sử dụng text-align:centerđể căn chỉnh văn bản và hình ảnh trong một cú nhấn.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Đôi khi chúng tôi trực tiếp thêm nội dung và hình ảnh trên quản trị viên WordPress bên trong các trang. Khi chúng tôi chèn hình ảnh bên trong nội dung và muốn căn chỉnh trung tâm đó. Mã được hiển thị là:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

Trong trường hợp đó, bạn có thể thêm nội dung CSS như thế này:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Sử dụng:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

Tôi nghĩ rằng đây là cách để tập trung vào một hình ảnh trong khung Laravel.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

điều này sẽ làm cho trung tâm hình ảnh theo cả chiều dọc và chiều ngang