这可能是一个愚蠢的问题,但由于中心对齐图像的常用方法不起作用,我想我会问 . 如何在容器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中居中 . 容器已隐藏溢出,所以我想看到图像的中心,因为它通常是焦点所在的位置 .
17 回答
我刚刚在W3 CSS页面上找到了这个解决方案,它解决了我的问题 .
资料来源:http://www.w3.org/Style/Examples/007/center.en.html
为左右放置一个相等的像素填充:
这也可以做到
水平居中的图像有效
使用定位 . 以下对我有用...(水平和垂直居中)
缩放到图像的中心(图像填充div):
没有缩放到图像的中心(图像确实 not 填充div):
将其添加到您的CSS中
只是引用一个子元素,在这种情况下是图像 .
CSS flexbox可以在图像父元素上使用justify-content: center来完成 .
HTML
CSS
Output:
将图片放在
newDiv
内 . 使包含div
的宽度与图像相同 . 将margin: 0 auto;
应用于newDiv
. 这应该将div
集中在容器中 .将图像居中于div中
如果必须内联(例如使用输入框时),
这是一个适合我的快速黑客:环绕你(在这种情况下的图像链接)
在
div
与style="text-align:center"
这就是我结束的事情:
这会将图像高度限制为600px,并将水平居中(如果父宽度较小,则向下调整大小)到父容器,保持比例 .
The CSS Guy建议如下:
所以,翻译,或许:
这是我的解决方案:http://jsfiddle.net/marvo/3k3CC/2/
您可以使用弹性框以最少的代码对齐您的内容
HTML
CSS
js小提琴链接https://jsfiddle.net/7un6ku2m/
我找到的最好的东西(似乎适用于所有浏览器)用于水平居中图像或任何元素是创建一个CSS类并包含以下参数:
CSS
然后,您可以将您创建的CSS类应用于标记,如下所示:
HTML
您还可以通过执行以下操作来内联元素中的CSS:
...但我不建议编写CSS内联,因为如果您想要更改样式,则必须使用居中的CSS代码对所有标记进行多项更改 .
我要走出去,说以下是你所追求的 .
注意,以下我认为在问题中意外省略了(见注释):
所以你需要的是:
http://jsfiddle.net/userdude/XStjX/3/