Mathieu Mathieu - 19 days ago 5
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: https://jsfiddle.net/DTcHh/27036/

HTML

<div id="deal-button">
<a class="btn btn-primary" href="www.yahoo.fr">
<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>
</a>
</div>


CSS

#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
<br/>
. 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
text_part1
and
text_part2

Answer

You can set the left margin on your bottom line.

margin-left: 8px;

Like so: https://jsfiddle.net/7s4cdy2t/

Alternatively set the position of your icon like so: https://jsfiddle.net/5dxjfL4v/

Comments