Bootstrap with custom css how to align text vertically?


Tags: css,twitter-bootstrap,alignment,center

Problem :

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;}


Solution :

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


    CSS Howto..

    how to apply css to a link within a particular div only?

    How can I center div in div in IE7

    How to use jQuery to fade in/out li a:hover css background-color?

    How to position div underneath dynamic ul

    How do I display a randomly generated list in columns with CSS?

    How to remove default CSS from TextField in flex?

    How to remove space above and below the in-line block elements?

    How to manage text breaks in span using js, css or anything else

    How to load css and js

    CSS how to make a fixed height?

    How to create a table with fixed layout?

    How to have div fill width and height of browser window and not have the image be streched

    How do I apply CSS to the table generated into another window?

    How to refresh div using ajax refresh?

    How to make TD behaving like TR(row) with CSS?

    How can I make it so that CSS uses a class only if another is not present on an element?

    How to connect css to html in Google Apps Scripts

    In emacs how do I add a second type of commenting to a css derived mode?

    How to achieve this CSS layout? [closed]

    How can I create a footer/toolbar in an iPhone web app?

    How to find the css class of an anchor link inside a cross domain iFrame?

    how to set part of circle as background in css

    How to get right sidebar up on main content on resize of flexible with page?

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How can I use development tools to find css class of a plugin item

    how can i change the following cs into one CSS CLASS

    how to make a title div center aligned

    How could I add two separate text styles to a button in a form in CSS?

    How to auto margin-left for the message bar

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?