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。

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

例如background-position：center;

JSFiddle

如何在中心对齐图像？CSS

3 个答案: