在div中水平居中图像

This is probably a stupid question but since the usual ways of center aligning an image are not working I thought I would ask. How can I center align (horizontally) an image inside its container div?

这可能是一个愚蠢的问题,但由于中心对齐图像的常用方法不起作用,我想我会问。如何在容器div中居中对齐(水平)图像?

Here's the HTML and CSS. I've also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.

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

Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.

好的,我已经添加了没有PHP的标记,所以应该更容易看到。这两种解决方案似乎都没有实际应用。顶部和底部的文本无法居中,图像应在其容器div中居中。容器已隐藏溢出,所以我想看到图像的中心,因为它通常是焦点所在的位置。

17 个解决方案

#1

The CSS Guy suggests the following:

CSS Guy建议如下:

So, translating, perhaps:

所以,翻译,或许:

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

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

这是我的解决方案:http://jsfiddle.net/marvo/3k3CC/2/

#2

I just found this solution below on the W3 CSS page and it answered my problem.

我刚刚在W3 CSS页面上找到了这个解决方案,它解决了我的问题。

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

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

#3

CSS flexbox can do it with justify-content: center on the image parent element.

CSS flexbox可以使用justify-content:以图像父元素为中心。

HTML

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

CSS

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

Output:

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;
}
.image-3 {
  width: 300px;
}

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

#4

This also would do it

这也可以做到

#imagewrapper {
    text-align:center
}

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

#5

This is what I ended doing:

这就是我结束的事情:

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

Which will limit the image height to 600px and will horizontally center (or resize down if the parent width is smaller) to the parent container, maintaining proportions.

这会将图像高度限制为600px,并将水平居中(如果父宽度较小,则向下调整大小)到父容器,保持比例。

#6

The best thing I have found (that seems to work in all browsers) for centering an image, or any element, horizontally is to create a CSS class and include the following parameters:

我找到的最好的东西(似乎适用于所有浏览器)用于水平居中图像或任何元素是创建一个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 */
}

You can then apply the CSS class you created to your tag as follows:

然后,您可以将您创建的CSS类应用于标记,如下所示:

HTML

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

You can also inline the CSS in your element(s) by doing the following:

您还可以通过执行以下操作来内联元素中的CSS:

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

...but I wouldn't recommend writing CSS inline because then you have to make multiple changes in all your tags using your centering CSS code if you ever want to change the style.

...但我不建议编写CSS内联,因为如果您想要更改样式,则必须使用居中的CSS代码对所有标记进行多项更改。

#7

I am going to go out on a limb and say that the following is what you are after.

我要走出去,说以下是你所追求的。

Note, the following I believe was accidentally omitted in the question (see comment):

注意,以下我认为在问题中意外省略了(见注释):

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

So what you need is:

所以你需要的是:

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

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

#8

to center an image horizontally this works

水平居中的图像有效

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

#9

Add this to your CSS

将其添加到您的CSS中

#artiststhumbnail,img {
      margin-left:auto;
      margin-right:auto;
    }

Just referencing a child element which in that case is the image.

只是引用一个子元素,在这种情况下是图像。

#10

Put a equal pixel padding for left and right:

为左右放置一个相等的像素填充:

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

#11

Put the picture inside a newDiv. Make the width of the containing div the same as the image. Apply margin: 0 auto; to the newDiv. That should center the div within the container.

将图片放入newDiv。使包含div的宽度与图像相同。申请保证金:0自动;到新日。这应该将div放在容器中心。

#12

Use positioning. The following worked for me... (Horizontally and Vertically Centered)

使用定位。以下对我有用...(水平和垂直居中)

With zoom to the center of the image (image fills the 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;
}

Without zoom to the center of the image (image does not fill the div):

没有缩放到图像的中心(图像不填充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;
    }

#13

you can align your content using flex box with minimum code

您可以使用弹性框以最少的代码对齐您的内容

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 fiddle link https://jsfiddle.net/7un6ku2m/

js小提琴链接https://jsfiddle.net/7un6ku2m/

#14

If you have to do this inline (such as when using an input box),
here is a quick hack that worked for me: surround your (image link in this case)
in a div with style="text-align:center"

如果你必须内联(例如使用输入框时),这里有一个适用于我的快速黑客:在一个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 */

#15

Center a image in a 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>

#16

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

#17

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