twitter bootstrap对齐元素中心

Question

我有一个panle body，包括一个图像和按钮。

            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
                        <button type="button" class="btn btn-primary btn-radio  btn-xs">img-1</button>
                        <input type="checkbox" id="left-item" class="hidden">
                    </div>
                    <div class="col-md-6">
                        <img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
                        <button type="button" class="btn btn-primary btn-radio  btn-xs">img-2</button>
                        <input type="checkbox" id="middle-item" class="hidden">
                    </div>
                </div>
        </div>

我无法设置按钮和图像的对齐方式。按钮应位于图像和中心下方。我可以使用自定义css创建一个临时解决方案，但我想学习是否有一个带bootstrap的解决方案。

Answer 1

由于标签本身就是inline显示，因此班级text-center为您提供了诀窍！

<div class="panel-body">
    <div class="row">
        <div class="col-md-6 text-center">
            <img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
            <button type="button" class="btn btn-primary btn-radio  btn-xs">img-1</button>
            <input type="checkbox" id="left-item" class="hidden">
        </div>
        <div class="col-md-6 text-center">
            <img src="http://placehold.it/70x50" class="img-thumbnail img-radio">
            <button type="button" class="btn btn-primary btn-radio  btn-xs">img-2</button>
            <input type="checkbox" id="middle-item" class="hidden">
        </div>
    </div>

预览

小提琴：http://www.bootply.com/QwYES83I3B

Answer 2

试试这个：

DEMO

<div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="col-md-12 text-center">
                        <img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
                    </div>
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn btn-primary btn-radio  btn-xs">img-1</button>

                        <input type="checkbox" id="left-item" class="hidden" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="col-md-12 text-center">
                        <img src="http://placehold.it/70x50" class="img-thumbnail img-radio" />
                    </div>
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn btn-primary btn-radio  btn-xs">img-2</button>
                        <input type="checkbox" id="middle-item" class="hidden" />
                    </div>
                </div>
            </div>
        </div>