9

I'm trying to vertically align text (pulled left) and a button (pulled right) inside a Bootstrap 3 alert. Somehow like this:

+------------------------------------------------+
| Some text                           [A button] |
+------------------------------------------------+

What I have so far is the following (Bootply):

<div class="alert alert-info" style="overflow:hidden">
    <p class="pull-left">Some text</p>
    <button class="btn btn-sm btn-default pull-right">A button</button>
</div>

The button is perfectly aligned (this was actually my first problem, solved here), but now the text is out of center.

I appreciate your help!

Community
  • 1
  • 1
muenchdo
  • 2,161
  • 1
  • 17
  • 30

3 Answers3

6

Assuming you don't want to use line-height, you can also try: 

div.alert-info {
    position: relative;
}

div.alert-info p.pull-left {
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
}

http://www.bootply.com/117260

Adrift
  • 58,167
  • 12
  • 92
  • 90
2

use display:table; width:100%; for the alert div, and for the p tag remove the float and use display:table-cell; vertical-align:middle.
You can use the same rules for the button.

n1kkou
  • 3,096
  • 2
  • 21
  • 32
-2

Here ya go i updated bootply here http://www.bootply.com/117259

All i did was add some line height on the pull-left class 

 .pull-left{line-height:30px}

That should do the trick

Travis
  • 2,185
  • 7
  • 27
  • 42
  • 1
    And if different alerts have different amounts of text? The line height would have to be adjusted. What about if he needs to use `.pull-left` somewhere else? – royhowie Feb 27 '14 at 14:57
  • Agreed but that wasn't the question, just use an ID for this particular alert... upated bootply http://www.bootply.com/117264 – Travis Feb 27 '14 at 15:00