html - 如何将图像居中对齐？CSS

Question

我有这个例子:

http://fiddle.jshell.net/

这是 HTMl 代码:

    <div class="wrap">

    <div class="wrap1">
<div class="image1">This is some text</div>
<div class="image2">This is some text</div>
<div class="image3">This is some text</div>
    </div>

    <div class="image4">This is some text</div>
    <div class="image5">This is some text</div>


</div>

这是 CSS 代码:

.image1,.image2,.image3{
  display: inline-block;
  height: 200px;
  width: 200px;
  background: url(http://placekitten.com/g/300/300);
  margin-left:auto;

}

.image4,.image5
{
  display: inline-block;
  height: 200px;
  width: 200px;
  background: url(http://placekitten.com/g/300/300);
}
.wrap1{
    margin-left:auto;
    margin-right:auto;
}
.wrap
{   border:1px solid;
    width:700px;
}

如何让图片居中对齐？

我希望所有图片在有边框的正方形内居中对齐

Answer 1

根据我的理解，您需要所有图像都位于边框的中心。
在包装类中使用text-align:center:

.wrap
{   border:1px solid;
    width:700px;
    text-align: center;
}

检查 Fiddle .