如何在包含div内对齐图像?

实例

在我的示例中,我需要使用class=“frame”将<img>垂直居中放置在<div>中:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame的高度是固定的,图像的高度是未知的。如果这是唯一的解决方案,我可以在.frame中添加新元素。我正在尝试在Internet Explorer 7和更高版本WebKit、Gecko上执行此操作。

看到这里的jsfiddle。

.框架{高度:25px;/*等于最大图像高度*/线条高度:25px;宽度:160px;边框:1px纯红色;文本对齐:居中;边距:1em 0;}国际货币基金组织{背景:#3A6F9A;垂直对齐:中间;最大高度:25px;最大宽度:160px;}<div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=250/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=25/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=23/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=21/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=19/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=17/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=15/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=13/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=11/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=9/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=7/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=5/></div><div class=frame><img src=“http://jsfiddle.net/img/logo.png“高度=3/></div>


当前回答

背景图像解决方案

我完全删除了image元素,并使用.frame类将其设置为div的背景

http://jsfiddle.net/URVKa/2/

这至少在Internet Explorer 8、Firefox 6和Chrome 13上运行良好。

我检查过了,这个解决方案无法缩小超过25像素高度的图像。有一个名为backgroundsize的属性可以设置元素的大小,但CSS 3会与Internet Explorer 7的要求相冲突。

我建议你要么重做你的浏览器优先级,为最好的可用浏览器设计,要么获取一些服务器端代码来调整图像大小,如果你想使用这个解决方案。

其他回答

您可以使用此选项:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

使用此选项:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

你可以改变字体大小。

除了像这样的文本外,还可以将图像居中放置在容器内(可以是徽标):

基本上,您可以包装图像

.外框{边框:1px纯红色;最小高度:200px;文本对齐:居中;/*仅水平对齐*/}.包装器{线条高度:200px;边框:2px蓝色虚线;边框半径:20px;边距:50px}国际货币基金组织{/*高度:自动*/垂直对齐:中间;/*仅垂直对齐*/}<div class=“外框”><div class=“wrapper”>一些文本<img src=“http://via.placeholder.com/150x150"></div></div>

您可以尝试以下代码:

.框架{显示:柔性;对齐内容:中心;对齐项目:居中;宽度:100%;}<div class=“frame”style=“height:25px;”><img src=“http://jsfiddle.net/img/logo.png" /></div>

想要对齐文本/标题之后且两者都在div中的图像吗?

请参阅JSfiddle或运行代码段。

只需确保所有元素(div、img、title等)都有ID或类。

对于我来说,这个解决方案适用于所有浏览器(对于移动设备,您必须使用@media调整代码)。

h2.h2红色{颜色:红色;字体大小:14px;}.mydiv类{页边空白:30px;显示:块;}img.mydesired类{右边距:10px;显示:块;float:左;/*如果要将文本与同一行上的图像对齐*/宽度:100px;高度:100px;margin-top:-40px/*更改此值以适应页面*/;}<div class=“mydivclass”><br/><img class=“mydesiredclass”src=“https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png"><h2 class=“h2red”>通过负操作img位置在div中的图像后对齐文本</h2></div>