如何在一个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中居中。容器有溢出隐藏，所以我想看到图像的中心，因为这通常是焦点所在。

983618 次浏览
小开
最佳答案 
#artiststhumbnail a img {
display:block;
margin:auto;
}

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

小开

我要大胆地说，以下是你想要的。

注意，我认为问题中不小心遗漏了以下内容(见评论):

<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/ < a href = " http://jsfiddle.net/userdude/XStjX/3/ " > < / >

小开

我刚刚在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;
}
小开

为左右两边设置相同的像素填充:

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

这就是我最后做的:

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

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

小开

CSS < >强flexbox < / >强可以用图像父元素上的justify-content: center来实现。为了保持图像的纵横比，添加align-self: flex-start;。

超文本标记语言

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

小开

添加到你的CSS:

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

只是引用了一个子元素，在这个例子中就是图像。

小开
将图片放在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;
}

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

您可以使用flex box以最少的代码对齐您的内容

超文本标记语言

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

小开

要使图像水平居中，这是有效的:

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

如果你必须内联执行(例如当使用输入框时)，
这里有一个对我有用的小技巧:环绕你的(图片链接)
在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 */
小开

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

小开

我发现的最好的事情(似乎在所有浏览器中都有效)是创建一个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类应用到你的标签，如下所示:

超文本标记语言

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

你也可以通过以下方法将CSS内联到你的元素中:

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

.．.但我不建议写CSS内联，因为如果你想要改变样式，你必须使用你的居中CSS代码对所有标签进行多次更改。

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

我尝试了几种方法。但这种方式对我来说非常合适

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

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

<div>
<img/>
</div>

提醒大家一下，图像的样式

object-fit : *depend on u*

所以最终的代码就像例子一样

div {
display: flex;
justify-content: center;
align-items: center;
}


div img {
object-fit: contain;
}
<div style="border: 1px solid red;">
<img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
border-radius: 50%;
height: 7.5rem;
width: 7.5rem;
object-fit: contain;" />
</div>

Final result

小开

将图像居中的响应方式可以是这样的:

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

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

小开

Style.css

img#center-img{


display: block;
margin: auto;
}

超文本标记语言

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

使用下面的css命令将图像居中。你必须在图像一开始就给出宽度。

img{
width: 300px;
position: fixed;
left0;
right:0;


}

提交答案