如何在中心對齊圖像？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;
}

檢查小提琴 。

Answer 2

嘗試這個...

 .image{ display: inline-block; height: 200px; width: 200px; background: url(http://placekitten.com/g/300/300); margin-left:auto; } .wrap { border:1px solid; width:700px; text-align: center; } 

  <div class="wrap"> <div class="wrap1"> <div class="image">This is some text</div> <div class="image">This is some text</div> <div class="image">This is some text</div> </div> <div class="image">This is some text</div> <div class="image">This is some text</div> </div> 

Answer 3

您可以使用背景位置

例如background-position：center;

JSFiddle