是否有更有效的方法来将图像居中在浮动的div中 [英] Is there a more efficient way to center an image inside a floated div

问题描述

我想知道如果有一个更有效的方法来定位一个浮动的div相比我的一个图像。现在我有它的设置，所以图像放置在一个p和我的中心p。看看额外的p标签给我的方式太麻烦了（。有没有我可以自己的img中心？谢谢！我列出了我现在下面的编辑：它需要垂直和水平！

I was wondering if there was a more efficient way to center an image inside a floated div compared to mine. Right now I have it set up so the image is placed inside a p and I center the p. Seeing that extra p tag annoys me way too much :(. Is there anyway I can center the img by itself? Thanks! I listed what I have now down below. It needs to be vertical and horizontal!

HTML

<div class="filler"><p><img src="images/qualGraphic.png" width="578px" height="256.72px" alt="Quality"/></p></div>

CSS

.filler {
    display:table;
    width:65.6%;
    height:300px;
    background-color:#000;
    display: table;
    float:left;
}
.filler p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

推荐答案

要将图像水平和垂直放置， / p>

To center both horizontally and vertically try adding this to the image.

img {
  display: block;
  position: absolute;
  margin: auto;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}

图像周围的元素需要相对定位，即

The element around the image needs to be positioned relatively i.e.

position: relative

以下是浮动元素中图片的示例

Here's an example with an image inside a floated element

http： //jsfiddle.net/xYEuS/

这篇关于是否有更有效的方法来将图像居中在浮动的div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！