CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
brain storm
brain storm

Reputation: 31262

Alignment issues with button on header using bootstrap 3?

I am using Bootstrap 3. Here is my HTML page: enter image description here As you can see the star is downside to the title. I want to align with title Here is my html code:

<p class="pull-right visible-xs">
            <h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500 
              <button type="button" class="btn bookmark" id="1799" > 
                <span class="
                  glyphicon glyphicon-star-empty "></span>
              </button>
              </center>
            </h3>
          </p>

and css:

button.bookmark {
  border:none;
  background: none;
  padding: 0;
 }

 .btn.bookmark .glyphicon {
  line-height: inherit;
  vertical-align: middle;
}

Upvotes: 0

Views: 1015

Answers (2)

davidpauljunior
davidpauljunior

Reputation: 8338

My answer to your previous question only works when the icon is adjacent to a .btn. The idea being that the two align perfectly as if they were two .btns.

In this case you don't need the .btn class, you can just set the vertical align on the button.

<button type="button" class="bookmark" id="1799">

button.bookmark {
  border:none;
  background: none;
  padding: 0;
  vertical-align: middle;
}

Demo

Upvotes: 1

Musik8101
Musik8101

Reputation: 585

I believe the line-height in your css that's causing it. It is inheriting the attribute and it might be smaller causing it to have too much space above it. If you have a link I can check it in firebug. If not try messing with that. You can also find some cool info about it Here

Hopefully that helps, Let me know if that does it

Upvotes: 1

Related Questions