Geek Answers Handbook

Align text and button vertically inside Bootstrap 3 alert

I am trying to vertically align the text (pulled to the left) and the button (pulled to the right) inside Bootstrap 3 alert . Anyway:

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

So far I have been as follows ( 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 fully aligned (this was my first problem, solved here ), but now the text is not in the center.

I appreciate your help!

+6
source share
3 answers

Assuming you don't want to use linear 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

+5
source

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

+1
source

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

All I did was add some row height in the left class

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

That should do the trick

-2
source

More articles:


All Articles