div 내에서 가로로 이미지 중앙

이것은 어리석은 질문 일 것입니다. 그러나 이미지를 정렬하는 일반적인 방법이 작동하지 않기 때문에 물어볼 것이라고 생각했습니다. 컨테이너 div 내부의 이미지를 가로로 맞추려면 어떻게해야합니까?

HTML과 CSS는 다음과 같습니다. 또한 축소판의 다른 요소에 대한 CSS도 포함 시켰습니다. 내림차순으로 실행되므로 가장 높은 요소는 모든 것의 컨테이너이고 가장 낮은 요소는 모든 것 안에 있습니다.

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

좋아, PHP없이 마크 업을 추가 했으므로 쉽게 볼 수 있습니다. 두 솔루션 모두 실제로 작동하지 않는 것 같습니다. 상단과 하단의 텍스트는 가운데에 놓일 수 없으며 이미지는 컨테이너 div 안에 가운데에 있어야합니다. 컨테이너에 오버플로가 숨겨져 있으므로 이미지의 중심을 일반적으로 초점이있는 곳으로보고 싶습니다.

CSS Guy 는 다음을 제안합니다.

따라서 번역은 다음과 같습니다.

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

내 솔루션은 다음과 같습니다. http://jsfiddle.net/marvo/3k3CC/2/

CSS flexbox 는 justify-content: center이미지 부모 요소에서 이를 수행 할 수 있습니다 . 이미지의 종횡비를 유지하려면 이미지를 추가 align-self: flex-start;하십시오.

HTML

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

CSS

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

산출:

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>

방금 W3 CSS 페이지 에서이 솔루션을 찾았으며 내 문제에 답했습니다.

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

출처 : http://www.w3.org/Style/Examples/007/center.en.html

이것도 할 것입니다

#imagewrapper {
    text-align:center
}

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

이미지 또는 요소를 가로로 가운데 맞추기 위해 내가 찾은 (모든 브라우저에서 작동하는 것처럼 보이는) 가장 좋은 것은 CSS 클래스를 만들고 다음 매개 변수를 포함하는 것입니다.

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 */
}

그런 다음 생성 한 CSS 클래스를 다음과 같이 태그에 적용 할 수 있습니다.

HTML

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

다음을 수행하여 요소에서 CSS를 인라인 할 수도 있습니다.

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

...하지만 CSS 인라인을 작성하지 않는 것이 좋습니다. 스타일을 변경하려면 중앙 CSS 코드를 사용하여 모든 태그를 여러 번 변경해야하기 때문입니다.

이것이 내가 한 일입니다.

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

이렇게하면 이미지 높이가 600px로 제한되고 비율을 유지하면서 부모 컨테이너의 가로 중앙 (또는 부모 너비가 더 작은 경우 크기가 조정 됨)됩니다.

나는 사지로 나가서 다음과 같은 말을 할 것입니다.

이 질문에서 실수로 다음 내용이 생략되었다고 생각합니다 (주석 참조).

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

따라서 필요한 것은 다음과 같습니다.

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

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

이미지를 가로로 가운데에 맞추려면 다음과 같이 작동하십시오.

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

이것을 CSS에 추가하십시오 :

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

이 경우 이미지 인 하위 요소를 참조하십시오.

왼쪽과 오른쪽에 동일한 픽셀 패딩을 넣으십시오.

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

안에 사진을 넣습니다 newDiv. 포함 너비를 div이미지와 동일하게 만드십시오 . 에 적용 margin: 0 auto;하십시오 newDiv. div컨테이너 내부를 중앙에 배치해야합니다 .

포지셔닝을 사용하십시오. 다음은 나를 위해 일했습니다 ... (수평 및 수직 중심)

이미지의 중심을 확대하면 이미지가 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;
}

이미지의 중심을 확대하지 않고 (이미지가 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;
    }

최소한의 코드로 플렉스 박스를 사용하여 콘텐츠를 정렬 할 수 있습니다

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>

JS 바이올린 링크 https://jsfiddle.net/7un6ku2m/

사업부에서 이미지 중심

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

몇 가지 방법을 시도했습니다. 그러나이 방법은 나에게 완벽하게 작동합니다.

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

이미지를 중앙에 배치하는 반응 형 방법은 다음과 같습니다.

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

(예 : 입력 상자를 사용하는 경우 등)이 인라인을해야 할 경우,
여기에 나를 위해 일한 빠른 해킹은 : 당신의 (이 경우 이미지 링크)를 둘러싸고있는
A의 div로style="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;
}

예, 이와 같은 코드는 정상적으로 작동합니다

<div>
 <img>
</div>

이미지의 스타일 인 U를 생각 나게합니다.

object-fit : *depend on u*

최종 코드는 Example과 같습니다.

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

컨테이너에서 flex 속성을 사용하는 것은 수직 및 수평으로 중앙에 배치 할 수있는 정답입니다.

여기에서 가장 좋은 대답은 항목을 세로, 가로로 가운데 맞추는 데 효과적이지 않습니다.

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