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

【问题标题】：Position 3 images vertically and horizontally in center将 3 个图像垂直和水平放置在中心
【发布时间】：2015-10-26 15:22:43
【问题描述】：

我的行中有一个按钮和 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;
}

问题是我无法让它们居中，也无法让它们垂直对齐。我该怎么做？

当我删除 float:left 时，我会得到如下结果：

如何垂直对齐它们？

【问题讨论】：

@Paulie_D 谢谢，但它们仍然没有垂直对齐，我该怎么做？（我已经用图片更新了我的主题）
在下面查看我的答案。
我不知道你为什么要为每个 img 设置一个 Div。也许你可以试试这个jsfiddle.net/hfcn5shj

标签： html css image twitter-bootstrap alignment

【解决方案1】：

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

请记住，这只倾向于仅适用于偶数。如果图像不合适放置引导类“img-responsive”，这将自动重新调整图像大小。

<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>

【讨论】：

【解决方案2】：

只需像这样包装所有类别 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/

【讨论】：

【解决方案3】：

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

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;
}

【讨论】：

【解决方案4】：

您似乎正在使用 Bootstrap，所以只需删除 float:left，所有内容都应该居中。

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

顺便说一句，你应该在元素上使用 either display:inline-block 或 float not both ...它们基本上是相互的独家。

【讨论】：