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

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

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

当我删除 float:left 时，我得到这样的结果：

如何垂直对齐它们？

Answer 1

您似乎在使用 Bootstrap，所以只需删除 float:left，一切都应该居中。

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

顺便说一下，你应该在元素 不是两者都 ...它们基本上是互斥的。

Answer 2

在这里，您可以使用 display table 轻松地将它们顶部对齐。这里的例子：

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 之间添加一些 space，那么只需将自定义 class 添加到中间类别，比如 mid-cat 并将其添加到你的 css :

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

这是一个包含以上代码的 jsfiddle：https://jsfiddle.net/AndrewL32/v64mwvm9/1/

Answer 4

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

请记住，这只适用于偶数。如果图像不合适，请放置 bootstrap class '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>

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

Position 3 images vertically and horizontally in center

html

css

image

alignment

twitter-bootstrap