1

我有一个可变宽度和高度的盒子。在我的示例中,我想将图片居中放置在盒子的中间。仅使用 CSS 解决此问题的最佳方法是什么?如果不需要,我宁愿不使用任何 JavaScript。

示例:http ://codepen.io/wesbos/pen/Ehour

我的 HTML:

<div class="box">
  <img src="http://placekitten.com/200/200">
</div>

我的 CSS:

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  text-align:center;
}
4

2 回答 2

3

您可以制作 DIV atable-cell然后使用vertical-align属性:

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  text-align:center;
  vertical-align:middle;    
  display: table-cell;
}

img{
  display: inline-block;
}
于 2013-06-24T22:46:36.630 回答
1

最简单的方法就是将图像作为 div 居中的背景,并且没有重复值,并且不需要使用 text-align 属性,方法如下:

HTML

<div class="box">
</div>

CSS

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  background:url(http://placekitten.com/200/200) no-repeat center center;
}

您可以将 url() 中的链接替换为您想要在本地计算机上的图像或在 Web 服务器上的图像链接,如上面的那个

于 2013-06-24T22:58:49.500 回答