Mathieu Mathieu - 1 year ago 95
CSS Question

CSS - Center horizontally 2-lines inside Bootstrap button

I don't manage to center the second line of text with the first.

Here is the Demo:


<div id="deal-button">
<a class="btn btn-primary" href="">
<span class="glyphicon glyphicon-star pull-left" aria-hidden="true"></span>
<span style= "font-weight: bold;font-size: 18px;text-transform: uppercase;">Take</span> <br/>
<span style= "font-style: italic">the deal</span>


#deal-button {
position: absolute;
width: 14%;
top: 50%;
right: 2%;

#deal-button a {
display: block;
margin-bottom: 10px;
font-size: 12px;
padding: 4px 12px;
white-space: normal;
line-height: 1.2;

#deal-button .glyphicon {
top: 8px;//override glitch in glyphicon vertical position

Note that I don't want to use a one line with wrap but really cut the first part from the second line with a
. I always want the two components of the text to be split on 2 different lines inside the button. They will after be injected dynamically as

Answer Source

You can set the left margin on your bottom line.

margin-left: 8px;

Like so:

Alternatively set the position of your icon like so:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download