0

我想知道与我的相比，是否有更有效的方法将图像置于浮动 div 中。现在我已经设置好了，所以图像被放置在 ap 中，并且我将 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;
}
4

2 回答 2

2

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

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

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

position: relative

这是一个浮动元素内的图像示例

http://jsfiddle.net/xYEuS/

于 2013-10-12T23:13:19.000 回答
0

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

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

于 2013-10-12T22:50:50.570 回答