在Bootstrap中将带有标签的2个图像居中对齐

Question

目标是我希望两个图像并排放置并居中于行的中间。

我尝试通过调整行的列

来做到这一点

问题在于，即使尝试通过行居中，它总是看起来有点偏离中心，如果我将最大宽度更改为更大，则图像不再并排并且打开彼此之上

图像的高度和宽度是......

• graft1 / graft2 - height =＆＃34; 333＆＃34;宽度=＃＆34; 500＆＃34;
• ivan1 / ivan2 - height =＆＃34; 542＆＃34;宽度=＃＆34; 400＆＃34;

这是我的HTML

    <section class="wrapper style1">
        <div class="container">
            <div id="content">
                <!-- Content -->
                <article>
                    <header>
                        <h2>Before and After</h2>
                    </header>
                    <div class="row">
                        <div class="div_baPics">
                            <img id="graft1" class="baPics" src="images/graft1.jpg" alt="">
                            <label for="graft1">Before</label>
                            <img id="graft2" class="baPics" src="images/graft2.jpg" alt="">
                            <label for="graft2">After</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="div_baPics">
                            <img id="ivan1" class="baPics" src="images/ivan1.jpg" alt="">
                            <label for="ivan1">Before</label>
                            <img id="ivan2" class="baPics" src="images/ivan2.jpg" alt="">
                            <label for="ivan2">After</label>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>

这是baPics的CSS

.baPics {
    max-width: 30%;
}

    .div_baPics {
        text-align: center;
    }

Answer 1

由于你正在使用Bootstrap，我选择了它的系统。看到这个小提琴：

http://jsfiddle.net/Bladepianist/55gyp94n/

好吧，我确实使用了真实的图像，这样你就可以看到结果了（当我测试的时候），你的图像应该在屏幕后调整大小。

.thumbnail {
    border: none;
}

除非您不想要缩略图的边框，否则不需要此代码;）。

希望它会让你满意，如果是这样的话，竖起大拇指：p。

Answer 2

你需要在包装器中包装img和相应的标签，如下所示：

/*Just to make a difference between pics*/
body {
    background: grey;
}
/*Minimal CSS*/
.div_baPics {
    text-align: center; /*Center alignment for the wrapper*/
    font-size: 0; /*To remove the white space between pics*/
}
.pic {
    display: inline-block;
}
.pic img {
    display: block;
    /*This should be set by default by Bootstrap*/
    max-width: 100%;
    height: auto;
}
.pic label {
    display: block;
    font-size: 16px; /*Or whatever font-size you use*/
}

<div class="div_baPics">
    <div class="pic">
        <img src="http://i.imgur.com/zNTWaR3.jpg" />
        <label>Pic 1</label>
    </div>
    <div class="pic">
        <img src="http://i.imgur.com/IqiJN2f.png" />
        <label>Pic 2</label>
    </div>
</div>