Question

我在将div的内容与中心对齐时遇到问题

我尝试了很多东西来使图像居中，但是没有用。

我有以下结构

<div class="middleSlideContents">
    <div class='image'>
       <img>
    </div>
    <div class='image'>
       <img>
    </div>
    <div class='image'>
       <img>
    </div>
</div>

现在我只需将<div class='middleSlideContents'>的内容与中心对齐，但我无法弄清楚我做错了什么。

<div class='image'>是动态生成的，但是当它生成时，它具有以下结构。

其余代码在Fiddle Demo

并且middleSlideContents div是一个响应，所以现在屏幕的高度和宽度变化它不是在小丑演示中

请帮忙，请告知结构是否错误或我做错了什么

Answer 1

您可以将div.image元素显示为inline-block，然后使用test-align-center作为父级（.middleSlideContents）将div（s）元素水平对齐：

.image {
    /* Other styles...  */
    display: inline-block;
}

.middleSlideContents {
    text-align: center;  /* <-- align the inline(-block) elements horizontally */
}

<强> JSFiddle Demo

更新

要垂直对齐inline-block框，请按照 this approach ：

.image {
    /* Other styles...  */
    display: inline-block;
    vertical-align: middle;
}

.middleSlideContents:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

<强> Working Demo

Answer 2

删除float，然后在css中添加2行，如下所示：

.middleSlideContents
{
    width: 86%;
    height: 100%;
    border-radius: 5px;
    float: left;
    margin-left: 7px;
    text-align:center; /*added */
}

.image
{
    /* height: 80%; */
    /* width: 16.2%; */
    border-radius: 5px;
    display:inline-block; /*added */
    margin-right:5px;
    border:1px solid;
}

working demo

修改

要垂直居中，请使用table-cell

.middleSlideContents { width: 86%; height: 100%; border-radius: 5px; float: left; margin-left: 7px; text-align:center; display:table; /* make parent div behave as a table */ table-layout:fixed; } .image { border-radius: 5px; display:inline-block; margin-right:5px; display:table-cell; /* make child as a table-cell*/ vertical-align:middle; /*vertical middle align*/ }

demo here

Answer 3

这里是水平中心对齐的演示

http://jsfiddle.net/jkkheni/7w8TC/20/

.middleSlideContents
{
  width: 86%;
  height: 100%;
  border-radius: 5px;
  float: left;
  margin-left: 7px;
  text-align:center;
  display:table; 
 }

  .image
 {
     /* height: 80%; */
     /* width: 16.2%; */
     border-radius: 5px;
     margin-right:5px;
     display:table-cell;
     vertical-align: middle; 

 }
 .image img
 {   
   border:1px solid;
   cursor:pointer;
   width:150px;
   height:150px;

 }

将div的内容对齐到中心

3 个答案:

更新