Hình ảnh trung tâm theo chiều ngang trong một div

Đây có lẽ là một câu hỏi ngu ngốc nhưng vì những cách thông thường của trung tâm sắp xếp một hình ảnh không hoạt động nên tôi nghĩ tôi sẽ hỏi. Làm cách nào tôi có thể căn giữa (theo chiều ngang) một hình ảnh bên trong div container của nó?

Đây là HTML và CSS. Tôi cũng đã bao gồm CSS cho các yếu tố khác của hình thu nhỏ. Nó chạy theo thứ tự giảm dần nên yếu tố cao nhất là nơi chứa mọi thứ và thấp nhất là bên trong mọi thứ.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Được rồi, tôi đã thêm đánh dấu mà không có PHP trong nên sẽ dễ nhìn hơn. Cả hai giải pháp dường như không hoạt động trong thực tế. Văn bản ở trên cùng và dưới cùng không thể được căn giữa và hình ảnh phải được căn giữa trong div container của nó. Container bị ẩn tràn nên tôi muốn xem trung tâm của hình ảnh như bình thường nơi lấy nét.

CSS Guy gợi ý như sau:

Vì vậy, dịch, có lẽ:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Đây là giải pháp của tôi trong: http://jsfiddle.net/marvo/3k3CC/2/

CSS flexbox có thể làm điều đó với justify-content: centerphần tử cha ảnh. Để duy trì tỷ lệ khung hình của hình ảnh, thêm align-self: flex-start;vào nó.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

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

Đầu ra:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Tôi chỉ tìm thấy giải pháp này bên dưới trên trang CSS của W3 và nó đã trả lời vấn đề của tôi.

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

Nguồn: http://www.w3.org/Style/Examples/007/center.en.html

Điều này cũng sẽ làm điều đó

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}

Điều tốt nhất tôi đã tìm thấy (dường như hoạt động trong tất cả các trình duyệt) để định tâm hình ảnh, hoặc bất kỳ yếu tố nào, theo chiều ngang là tạo một lớp CSS và bao gồm các tham số sau:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Sau đó, bạn có thể áp dụng lớp CSS mà bạn đã tạo cho thẻ của mình như sau:

HTML

<img class="center" src="image.jpg" />

Bạn cũng có thể nội tuyến CSS trong (các) phần tử của mình bằng cách thực hiện như sau:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... nhưng tôi không khuyên bạn nên viết CSS nội tuyến vì sau đó bạn phải thực hiện nhiều thay đổi trong tất cả các thẻ bằng mã CSS định tâm nếu bạn muốn thay đổi kiểu.

Đây là những gì tôi đã làm:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Việc này sẽ giới hạn chiều cao hình ảnh xuống 600px và sẽ nằm ở giữa theo chiều ngang (hoặc thay đổi kích thước xuống nếu chiều rộng cha nhỏ hơn) vào vùng chứa cha, duy trì tỷ lệ.

Tôi sẽ đi ra ngoài trên một chi và nói rằng sau đây là những gì bạn đang theo đuổi.

Lưu ý, những điều sau đây tôi tin đã vô tình bị bỏ qua trong câu hỏi (xem bình luận):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Vì vậy, những gì bạn cần là:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Để căn giữa một hình ảnh theo chiều ngang, điều này hoạt động:

<p style="text-align:center"><img src=""></p>

Thêm phần này vào CSS của bạn:

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

Chỉ cần tham chiếu một yếu tố con mà trong trường hợp đó là hình ảnh.

Đặt một pixel pixel bằng nhau cho trái và phải:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Đặt hình ảnh bên trong a newDiv. Làm cho chiều rộng của chứa divgiống như hình ảnh. Áp dụng margin: 0 auto;cho newDiv. Điều đó nên tập trung vào divbên trong container.

Sử dụng định vị. Những điều sau đây làm việc cho tôi ... (Theo chiều dọc và theo chiều dọc)

Với zoom đến trung tâm của hình ảnh (hình ảnh lấp đầy div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Không phóng to đến trung tâm của hình ảnh (hình ảnh không lấp đầy div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

bạn có thể căn chỉnh nội dung của mình bằng hộp flex với mã tối thiểu

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

liên kết js fiddle https://jsfiddle.net/7un6ku2m/

Căn giữa một hình ảnh trong một div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Tôi đã thử một vài cách. Nhưng cách này hoạt động hoàn hảo với tôi

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

Một cách phản hồi để căn giữa một hình ảnh có thể như thế này:

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Nếu bạn phải làm nội tuyến này (chẳng hạn như khi sử dụng một hộp đầu vào),
đây là một hack nhanh chóng mà làm việc cho tôi: bao quanh (liên kết hình ảnh trong trường hợp này) của bạn
trong một divvớistyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Vâng, mã như thế này hoạt động tốt

<div>
 <img>
</div>

nhưng chỉ để nhắc nhở bạn, phong cách cho hình ảnh

object-fit : *depend on u*

vì vậy mã cuối cùng giống như ví dụ

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Sử dụng thuộc tính flex trên container là câu trả lời đúng cho việc có thể định tâm cả theo chiều dọc và chiều ngang.

Câu trả lời hàng đầu ở đây KHÔNG hoạt động để định tâm một mục theo chiều dọc, chỉ theo chiều ngang.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>