Question

我的按钮和我的行中有2张图片。这就是它现在的样子：

我的HTML看起来像这样：

<div class="row text-center">
    <div class="col-md-12">
        <div align="center" class="category">
            <button class="btn btn-default"><?php echo $lrow[84]; ?></button>
        </div>
        <div align="center" class="category">
            <img id="qr_click" class="qr_click" src="recourses/imgs/qr_code.png" alt="QR Code" />
        </div>
        <div align="center" class="category">
            <img style="height:100px;" src="recourses/imgs/identiteitskaart.jpg" alt="identiteitskaart" />
        </div>
    </div>
</div>

我的css：

.category {
    position:relative;
    display: inline-block;
    float:left;
    padding:10px;
}

问题在于我无法将它们置于中心，我无法将它们垂直对齐。我怎么能这样做？

当我删除浮动：左边我得到这样的东西：

如何垂直对齐它们？

Answer 1

你似乎正在使用Bootstrap，所以只需删除float:left，一切都应该正常。

.category {
    position:relative;
    display: inline-block;
    padding:10px;
    vertical-align: top; /* if required */
}

顺便说一下，你应该在元素上使用 display:inline-block 或 float ...它们基本上是相互排斥的。

Answer 2

在这里，您可以使用显示桌面轻松对齐它们。示例：

http://codepen.io/AxelCardinaels/pen/QbzeBP

HTML：

<div class="row text-center">
    <div class="col-md-12 container">
        <div align="center" class="category">
            <button class="btn btn-default">Hello</button>
        </div>
        <div align="center" class="category">
            <img id="qr_click" class="qr_click" src="http://gillesdemey.net/wp-content/uploads/2015/03/Minimalist-Home-Architecture-Designs-350.jpg" width="300" alt="QR Code" />
        </div>
        <div align="center" class="category">
            <img  src="http://catalogue2013.usc.edu/files/2013/05/architecture.jpg" alt="identiteitskaart" />
        </div>
    </div>
</div>

CSS：

.container{
  display:table;
}

.category {
    display:table-cell;
  vertical-align: top;
   padding:10px;
}

Answer 3

只需包装所有类别div：

<div class="cat-wrap">
    <div class="category">....</div>
    <div class="category">....</div>
    <div class="category">....</div>
</div>

然后将此添加到您的css：

.cat-wrap {
    display: flex;
    justify-content: center;
}

.category {
    float: none;
    display:inline-block;
}

如果你想在类别div之间留出一些空格，那么只需在中间类别中添加一个自定义类，例如mid-cat并将其添加到你的css中：

.mid-cat  {
    margin: 0px 10px;
}

以下是具有上述代码的jsfiddle：https://jsfiddle.net/AndrewL32/v64mwvm9/1/

Answer 4

使用bootstrap，您可以根据所需图像的大小使用偏移选项。

请记住，这只适用于偶数。如果图像不合适，则将引导级别设置为“img-responsive＆＃39;”，这将自动重新调整图像大小。

<div class="row text-center">
    <div class="col-md-offset-2 col-md-8">
        <div align="center" class="category">
            <button class="btn btn-default"><?php echo $lrow[84]; ?></button>
        </div>
        <div align="center" class="category">
            <img class="img-responsive" id="qr_click" class="qr_click" src="recourses/imgs/qr_code.png" alt="QR Code" />
        </div>
        <div align="center" class="category">
            <img class="img-responsive" style="height:100px;" src="recourses/imgs/identiteitskaart.jpg" alt="identiteitskaart" />
        </div>
    </div>
</div>

将3个图像垂直和水平放置在中心

4 个答案: