Question

我想知道是否有一种更有效的方法可以将图像置于浮动div中，与我的相比。现在我把它设置好所以图像放在p里面，我把p放在中心。看到额外的p标签让我感到非常恼火:(。无论如何我可以将img集中在一起吗？谢谢！我列出了我现在在下面的内容。编辑：它需要垂直和水平！

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;
}

Answer 1

要水平和垂直居中，请尝试将其添加到图像中。

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

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

position: relative

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

http://jsfiddle.net/xYEuS/

Answer 2

只需将CSS属性text-align:center添加到.filler类。 img是内联元素，因此它将根据text-align属性居中。

JS小提琴： http://jsfiddle.net/CgJZ4/

是否有更有效的方法将图像置于浮动div中

2 个答案: