如何创建带有边框的圆形、响应性、引导按钮的CSS？边框影响像素

Question

我正在与引导CSS搏斗，并且在最后几个像素的排列上遇到困难。

我试图创建一个响应行的圆形图像，然后是一个圆形链接/按钮来添加一个新的图像。标记是这样的

<div class="container">
    <div class='row'>
        <div class="col-xs-2">
            <a href="/url/to/object">
                <img class="img-circle img-responsive" src="https://pensivepool.files.wordpress.com/2012/01/josef-albers-study-for-homage-to-the-square-silkscreen-print-80774.jpg">
            </a>
        </div>
        <div class="col-xs-2">
            <a href="/url/to/object">
                <img class="img-circle img-responsive" src="https://pensivepool.files.wordpress.com/2012/01/josef-albers-study-for-homage-to-the-square-silkscreen-print-80774.jpg">
            </a>
        </div>
        <div class="col-xs-2">
            <a class="btn btn-default btn-circle btn-responsive" href="#link_to_add_new">
                <i class="fa fa-plus"></i>
            </a>
        </div>
    </div>
</div>

我已经用css做了一个例子。http://jsfiddle.net/9fgd4972/

如您所见，该按钮过高1或2个像素，这是由于边框的额外宽度。在css中说明这个边框的最佳方法是什么，这样圆圈才能保持响应。

此外，在这个高度内垂直对齐+文本的最佳方法是什么。

谢谢你的建议。

Answer 1

你可以试着用框影来改变边框。

关于垂直对齐，您可以将图标(+)定位为绝对位置，将所有值设置为0(上、右、下、左)，边距和高度设置为auto，最大高度设置为图标的精确高度。

如下所示：

box-shadow: 0 0 0 1px #ccc;

和：

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: auto;
height: auto;
max-height: 12px;

这是一个有用的小提琴：http://jsfiddle.net/alessiozuccotti/14v1f8rk/4/