Question

这可能是一个愚蠢的问题，但由于中心对齐图像的常用方法不起作用，我想我会问。如何在容器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中居中。容器有隐藏的溢出，所以我想看到图像的中心，因为它通常是焦点所在的位置。

Answer 1

The CSS Guy建议如下：

所以，翻译，或许：

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

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

Answer 2

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

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

来源：http://www.w3.org/Style/Examples/007/center.en.html

Answer 3

CSS flexbox可以在图片父元素上使用justify-content: center来完成。

<强> HTML

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

<强> CSS

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

<强>输出：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这也可以做到

#imagewrapper {
    text-align:center
}

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

Answer 5

我发现（在所有浏览器中似乎都有效）用于水平居中图像或任何元素的最好的事情是创建一个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代码对所有标记进行多项更改。

Answer 6

这就是我结束的事情：

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

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

Answer 7

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

注意，以下我认为在问题中意外遗漏了以下内容（见评论）：

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

Answer 8

将此添加到您的CSS

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

仅引用子元素，在这种情况下是图像。

Answer 9

水平居中图像

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

Answer 10

左右两侧使用相同的像素填充：

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

Answer 11

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

js fiddle link https://jsfiddle.net/7un6ku2m/

Answer 12

使图像居中的响应方式如下：

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

Answer 13

是的，这样的代码可以正常工作

<div>
 <img>
</div>

但只是提醒您，图像的样式

object-fit : *depend on u*

因此最终代码应类似于示例

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

Answer 14

我尝试了几种方法。但是这种方式对我来说很完美

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

Answer 15

将图像居中于div

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 16

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

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

Answer 17

将图片放在newDiv内。使包含div的宽度与图像相同。将margin: 0 auto;应用于newDiv。这应该将div置于容器中心。

Answer 18

如果必须内联（例如使用输入框时），请执行此操作这是一个适合我的快速黑客：环绕你（在这种情况下的图像链接）
在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 */

Answer 19

要简单地回答问题，您必须在子元素周围有一个包装器。

包装程序将指示范围的子元素在其中工作。

位置：相对；
相对元素相对于其正常位置定位，因此“ left：20px”会将20像素添加到元素的LEFT位置
显示：阻止或内联阻止；
块将元素显示为块元素。它从新行开始，并占据整个宽度

内嵌块 ，将元素显示为内联级块容器。元素本身被格式化为嵌入式元素，但是您可以应用高度和宽度值
最小高度或最小宽度：（x）px;

其中的子元素需要按照包装程序设置的规则运行。

位置：绝对；
绝对相对于其第一个定位（非静态）祖先元素定位的元素
显示：阻止或内联阻止；
块将元素显示为块元素。它从新行开始，并占据整个宽度

内嵌块 ，将元素显示为内联级块容器。元素本身被格式化为嵌入式元素，但是您可以应用高度和宽度值
最小高度或最小宽度：（x）px;
保证金：自动； 自动浏览器计算利润率
顶部：0； 0 以px，cm等设置上边缘位置。
底部：0； 0 设置底边的像素，厘米等位置。
左：0； 0 以px，cm等设置左边缘位置。
右：0； 0 以px，cm等设置右边缘位置。

顶部，底部，左侧，右侧 在 位置的指令：绝对 和 < i> margin auto ，获取所有边缘的计算出的差值，并且子元素在其wrapper元素内运行。

.Image-Container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-image: -webkit-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  background-image: -moz-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  background-image: -o-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40% #3fe9d1 60%, #b93fe9);
  background-image: linear-gradient(to right, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  border: 3px dashed #fff;
}

.Image-Container img {
  position: absolute;
  display: inline-block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class='Image-Container'>
  <img src='http://www.freedigitalphotos.net/images/img/homepage/usa-travel-1-bottom-15226.jpg'>
</div>

Answer 20

.document {
  align-items: center;
  background-color: hsl(229, 57%, 11%);
  border-radius: 5px;
  display: flex;
  height: 40px;
  width: 40px;
}

.document img {
  display: block;
  margin: auto;
}

<div class="document">
  <img src="./images/icon-document.svg" alt="icon-document" />
</div>

Answer 21

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

Answer 22

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

Answer 23

Style.css

img#center-img{

 display: block;
 margin: auto;
}

HTML

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

在div中水平居中图像

23 个答案:

将图像居中于div