居中alignment图像水平内
这可能是一个愚蠢的问题，但由于中心alignment图像通常的方式不工作，我想编号问。 我怎么能中心alignment（水平）的图像内的容器div？
下面是HTML：
<!--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> inheritance人的CSS，我也包括缩略图的其他元素的CSS。 它以降序运行，所以最高的元素是一切的容器，最低的是一切。
#thumbnailwrapper { color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border-color: #DADADA; border-style: solid; border-width: thin; font-size: 15px } #thumbnailwrapper:hover { box-shadow: 0 0 5px 5px #DDDDDD } #artiststhumbnail { width: 120px; height: 108px; overflow: hidden; border-color: #DADADA; border-style: solid; border-width: thin; background-color: white; } #artiststhumbnail:hover { left: 50px } #genre { font-size: 12px; font-weight: bold; color: #2A2A2A }
好的，我已经添加了没有PHP的标记，所以应该更容易看到。 这两种解决scheme在实践中似乎都不起作用 顶部和底部的文本不能居中，图像应该在其容器div中居中。 容器溢出隐藏，所以我想看到图像的中心，因为这通常是重点所在。
这个人在这里build议如下：
所以，翻译，也许：
#artiststhumbnail a img { display:block; margin:auto; }
编辑：最后到处去创build一个小提琴帐户。 这是我的解决scheme： http : //jsfiddle.net/marvo/3k3CC/2/
第二次编辑：将.artiststhumbnail改为#artiststhumbnail。
我知道这是旧的，但它是谷歌searchdiv中心＃1的职位，所以我想我会分享。
我刚刚在W3 CSS页面上find了这个解决scheme，它解答了我的问题。 我总是忘记这一点，尽pipe过去7年使用CSS）
img { display: block; margin-left: auto; margin-right: auto; }
资料来源： http : //www.w3.org/Style/Examples/007/center.en.html
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; }
输出：
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>
这也是可以的
#imagewrapper { text-align:center } #imagewrapper img { display:inline-block; margin:0 5px }
这就是我所做的：
<div style="height: 600px"> <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; max-height: 100%; display:block; margin:auto;" /> </div>
这将限制图像高度为600px，并将水平居中（如果父宽度较小，则向下resize）到父容器，保持比例。
我要出去，说下面是你以后的事情。
请注意，以下我相信在问题中被意外省略（请参阅评论）：
<div id="thumbnailwrapper"> <!-- <<< This opening element --> <div id="artiststhumbnail"> ...
所以你需要的是：
#artiststhumbnail { width:120px; height:108px; margin: 0 auto; /* <<< This line here. */ ... }
为左侧和右侧放置相等的像素填充：
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
将此添加到您的CSS
#artiststhumbnail,img { margin-left:auto; margin-right:auto; }
只要引用一个在这种情况下是图像的子元素。
最好的祝福
水平居中这个图像这个工程
<p style="text-align:center"><img src=""></p>
把图片放在一个新的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; }
<!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>
您可以使用popup框将您的内容与最小代码alignment
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>
如果你必须这样做内联（如使用input框），
这里是一个快速的黑客工作对我来说：围绕你的（图像链接在这种情况下）
在与style="text-align:center"的div
<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.comhttp://img.dovov.combranding/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>
