CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mathieu
Mathieu

Reputation: 4787

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

Upvotes: 0

Views: 68

Answers (2)

daniel aagentah
daniel aagentah

Reputation: 1702

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/

Upvotes: 1

Jordan D
Jordan D

Reputation: 728

Although you should write it in the css;

<span style= "font-style: italic;padding-left:14%;">the deal</span>

Upvotes: 0

Related Questions