如何在Bootstrap中居中对齐内联图像？

Question

我在下面的代码中有一个下拉按钮和一张响应图像。

 void createDialog(){
        AlertDialog.Builder alert = new AlertDialog.Builder(getActivity());
        alert.setTitle("Bus arriving !");
        alert.setMessage("Bus has reached into your tracking area");
        alert.setPositiveButton("OK",null);
        alert.show();

        PlayAlertfNeeded();
        alert.setOnDismissListener(this);
    }

    @Override
    public void onDismiss(DialogInterface dialog) {
        if (player != null) {
            player.stop();
            player.release();
        }
    }

CSS：

<div class="container dropdown ">
    <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        <span class="icon-bars-button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Option1</a></li>
        <li><a href="#">Option2</a></li>
        <li><a href="#">Option3</a></li>
    </ul>
    <img class="img-responsive div-inline" src="res/test.png" alt="Logo">
</div>

图像显示在下拉按钮旁边。我希望它在行的中心。 附加图像，结果如图像顶部。我想要它在图像的下面部分。

Answer 1

使用bootstrap 3，您可以添加一个.center-block类来居中对齐

<div class="container dropdown ">
<a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<span class="icon-bars-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<ul class="dropdown-menu" >
<li ><a href="#">Option1</a></li>
<li ><a href="#">Option2</a></li>
<li ><a href="#">Option3</a></li>
</ul>
<img class="img-responsive div-inline center-block" src="res/test.png" alt="Logo"> 
</div>

Answer 2

您可以将a tag放在一个div中，将img放在另一个div中，并相应地定义网格类，并将text-center类添加到img div。

或者，你可以为你做这个例子。

.div-inline {
    display: inline-block;
    text-align: center;
    width: 95%;
}