如何保持块元素内联并正确居中？

Question

尝试在一行上有3个div，每个div都有一个居中的图像，它分配在页面的三分之一处。它们似乎都离左边太远了。 另外，我如何在div中垂直居中？

目前的结果

这是代码。

HTML

<div class="block">
        <div class="left">
            <img class="swork" src="100.jpg"/>
        </div>
        <div class="center">
            <img class="swork" src="010.jpg"/>
        </div>
        <div class="right">
            <img class="swork" src="001.jpg"/>
        </div>
</div>

CSS

.swork {
max-width: 300px;
max-height: 500px;
}

.block {
    width: 100%;
    height: 350px;
}

.left {
    display: inline-block;
    width: 33%;
}

.center {
    display: inline-block;
    width: 33%
}

.right {
    display: inline-block;
    width: 33%;
}

Answer 1

将success和vertical-align: middle添加到每个子div的样式中。

Answer 2

你只需要这个：

.block {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Demo

Answer 3

尝试使用css：

<STYLE>
.swork {
max-width: 300px;
max-height: 500px;
}

.block {
    width: 100%;
    height: 350px;
    align-content:center;
}

.left {
    display: inline-table;
    width: 33%;
    align-content:center;
    vertical-align:middle;
}

.center {
    display: inline-table;
    width: 33%;
    align-content:center;
    vertical-align:middle;
}

.right {
    display: inline-table;
    width: 33%;
    align-content:center;
    vertical-align:middle;
}
</STYLE>

并将您的块div设置为align =“center”。

Answer 4

试试这个块类css ..

Text