Bootstrap with custom css how to align text vertically?

Question

I was trying to add some custom code to bootstrap and in the end my text in the frame was not perfectly vertically centered.

Code is very simple and there is only a few lines, but I still could not make it vertically centered, here's how it looks like jsfiddle:

http://jsfiddle.net/atJzD/1/

It works perfect (text becomes vertically centered) if I do not include bootstrap css, but I really need to use it.

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

Answer 1

Instead you can override some properties of default clases of bootstrap with .init class and use bootstrap alert message like this:

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

can you view a demo Here