2

I'm pretty noobish at CSS, but I've been playing around with Bootstrap 3 for a couple weeks. That said, I'm sorry if the question is too easy/repeated. I've searched around (both Google and Stackoverflow), but didn't find the answer to my issue (probably because I don't know how to query for it =/).

Thing is, I'm trying to have a link ( element ) that I want vertically aligned with a button (). Also, I want the button to be on the right of the container. Here's a fiddle that shows the issue:

http://jsfiddle.net/69bmm/

<div class="row">
    <a href=";">Text I want vertical-middle</a>
    <button type="submit" class="btn btn-info pull-right">Button</button>
</div>

In the fiddle, I add the pull-right class to the button, and the elements are in the position I want them to be, but I wanted the link-text to be aligned with the button-text, but it doesn't matter what padding or margin I add to the element, I can't align them.

What I've tried to solve:

  • Encapsulate both and elements in a div each, and set "float:right" to the latter, removing the pull-right class. (http://jsfiddle.net/66zbh/)
  • Encapsulate in a div with col-md-8 and the , without the pull-right class, in a col-md-4, they get vertically aligned as I want them, but the button isn't pulled to the right

Thank you very much!

Gabriel Pires
  • 376
  • 5
  • 9
  • As @sw4 stated, line-height is a good solution, but I would put it on the anchor tag. Also, you stated that you are new to both css and Bootstrap, so I just wanted to point out that you are using the row incorrectly. Rows must have columns inside of them. For a quick understanding about the grid, you can take a look at my answer here: http://stackoverflow.com/questions/23899715/bootstrap-balancing-bullet-columns/23912463#23912463 – jme11 Jul 16 '14 at 13:16
  • Thank you for your concern! Your answer is really complete and well-explained about the grid system, but in the actual html, I wasn't using rows for this, only in the fiddle ^^. – Gabriel Pires Jul 16 '14 at 13:24

1 Answers1

3

You need to set the line-height for the .row to be the same height as your button:

Demo Fiddle

.row{ /* <-- you will want to add better specificity here, e.g. refer to the specific element by id */
    line-height:34px;
}
SW4
  • 69,876
  • 20
  • 132
  • 137