CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andy Harvey
Andy Harvey

Reputation: 12663

How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

I'm wrestling with bootstrap CSS and am having trouble lining up the last couple of pixels.

I'm trying to create a responsive row of round images, followed by a round link/button to add a new image. The markup is like this

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

I've put an example with css on jsfiddle. http://jsfiddle.net/9fgd4972/

As you can see, the button is 1 or 2 pixels too high, and this is due to the extra width of the border. What is the best way to account for this border in the css, so that the circle remains responsive.

Also, what is the best way to vertically align the + text within that height.

Thanks for suggestions.

Upvotes: 1

Views: 1841

Answers (1)

Alessio
Alessio

Reputation: 3626

You could try to change the border with a box-shadow.

About the vertical alignment you could position the icon (+) with position absolute, set all the values to 0 (top, right, bottom, left), margin and height to auto and max-height to the exactly height of the icon.

Like this:

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

And:

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

Here's a working fiddle: http://jsfiddle.net/alessiozuccotti/14v1f8rk/4/

Upvotes: 2

Related Questions