jquery - 将 div 的内容居中对齐

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 是响应式的，所以高度和宽度因屏幕而异，现在它不在 jiddle 演示中

请提供任何帮助，请告诉我结构是否错误或我做错了什么

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