如何将img标签定位在正确的中心？

<div > 
     <img src="some url" /> 
</div>

div的高度和宽度不断变化。我想把这个img放在右边对齐并垂直放置在中心。图像的高度和宽度是固定的。如何动态解决它？有时div的宽度和高度与img的宽度和高度相同。或div的宽度和高度比IMG的宽度和高度大于...如何将img标签定位在正确的中心？

来源

2013-01-14 JackAss

http：// stackoverflow。com/questions/388180/how-to-make-an-image-center-vertical-horizontal-inside-a-bigger-div –

@rejo这不是OP想要的 – sandeep

试试这个，我认为它应该帮助你在这种情况下：

div{ 
    position: relative; 
} 
img{ 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
}

来源

2013-01-14 11:10:45

我试过了不行 – JackAss

尝试在你的CSS验证码，

float:right; 
    margin-top:25%;

您可以在这里看到完整的代码和示例。 http://jsfiddle.net/VzLjq/

祝你好运！

来源

2013-01-14 11:15:43 Venkat

我面临的问题是div的高度各不相同，我试图在垂直方向获得图像。是的，如果将边际收益率定为25％，则会下降并比顶部减少25％。但如何处理底部？ – JackAss

尝试使用css。

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;} 
#content img.alignright {float:right; margin:5px 0 5px 15px;} 
#content img.aligncenter {display:block; margin:10px auto;} 
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

和你的HTML

<img class="alignright" src="img/test.jpg" height="225" width="300" 
alt="Example content image using the class .alignright" />

尝试使用这些CSS模板按您的要求。

来源

2013-01-14 11:17:11

您可以使用显示：表为此。像这样写：

HTML

<div class="parent"> 
    <div class="child"> 
    <img src="http://dummyimage.com/200x200/000/fff&text=image" /> 
    </div> 
</div>

CSS

.parent{ 
    height:400px; 
    border:1px solid red; 
    text-align:right; 
    display:table; 
    width:100%; 
} 
.parent .child{ 
    display:table-cell; 
    vertical-align:middle; 
    width:100%; 
    height:100%; 
}

入住这http://jsfiddle.net/qEYuD/

这是工作，直到上述IE8 &。

来源

2013-01-14 11:23:39 sandeep

如果你的图片是静态的，你可以使用相对定位和负边距：

http://jsfiddle.net/qEYuD/3/

.parent{ 
    height:400px; 
    border:1px solid red; 
    text-align: right; 
} 

.parent img { 
    position: relative; 
    top: 50%; 
    margin-top: -100px; /* half the height of the image */ 
}

如果同时你的形象和容器有一个未知的尺寸，那么Flexbox可以用最少量的做标记：（不包含前缀）

http://jsfiddle.net/qEYuD/4/

.parent{ 
    height:400px; 
    border:1px solid red; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    align-content: center; 
}

Flexbox的缺点是浏览器支持尚不完善。 IE10是第一个支持它的IE版本，Firefox现在只是更新他们的支持以遵循当前的规范。

来源

2013-01-14 13:52:56 cimmanon

如何将img标签定位在正确的中心？

回答

相关问题