How to use CSS to vertically center a form in a div


Tags: css,html5,html,center

Problem :

video.html

<!DOCTYPE html> 
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headerBar">
           <div class="searchForm">
                <form id="search" action="" method="get" target="_blank">
                    <input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
                    <select name="search_type">
                    <option value="sAll">All</option>
                    </select>
                    <input type="submit" value="Search" />
                </form>
            </div>
        </div>
    </body>
</html>

style.css

.headerBar {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed;
    top:0;
    left:0;
}

.searchForm {
    text-align: center;
    border: 0px;
    width: 100%;
    vertical-align: middle;
    position: relative;
}

Code:

Here is the code for you to try.

Question 1:

How can I vertically center the form (TextBox, ComboBox, and Button) in the headerBar using CSS? I want to stick with <div> instead of <table> if at all possible. I want it to be centered dynamically, so that if the page is re-sized, it will re-center... basically it can't be hard coded in with px.

Question 2:

How can I add more elements, once again using the <div> tags so that the items will not be centered, but approximately 1/4 and 3/4 respectively. To give you an example, the top bar in the image is YouTube.com. The Second, is my code. I would like to place objects where the YouTube logo is. Example

Question 3: (bonus)

This is not important, only an extra. In the picture shown above, is it possible to get the exact search bar and search button onto my form, but allow it to have what ever functionality I want?



Solution :

Question #1:

Remove height from div.headerBar, this way it will size up with the inputs.

If you want a height, then don't use height. Use line-height:

div.headerBar { line-height: 44px; }

Question #2:

<div class="wrap">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
    <div class="clear" />
</div>


.wrap { width: 100%; }
.left { float: left; width: 25%; }
.mid { float:left; width: 50%; }
.right { float:left; width: 24%; }
.clear { clear: both; }

Check fiddle: http://jsfiddle.net/WHXnW/2/

Updated fiddle: http://jsfiddle.net/WHXnW/4/

Now this is closer to what you want. Just play around with the styles to get it just the way you want.


    CSS Howto..

    How to make CSS Column Design quickly?

    How to figure out which lines of css is not actually affecting anything again?

    How to take in account children for :nth-child

    How to create a CSS box link without using display: block

    How do I make my footer sit at the bottom of my content?

    How to align images and unordered list

    How do you make HTML elements appear on a vertical line using CSS?

    CSS :hover - How to get lower DIVs to :hover as well?

    How to enable CSS editor features in VS 2012?

    How to create this CSS border

    How not differ tableview focused rows from other rows?

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?

    How to expand vertically web's body when open menu

    How can I align my form to the center of the background? CSS

    How to apply CSS generated by colorzilla to the body element [closed]

    How can I make a div horizontally center itself in another div? [duplicate]

    How do I fix the image size when changing to another image?

    How to remove unwanted whitespace css/html

    How to avoid double borders on list of divs

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    HTML5 CSS (How to on hover image ignore transparent)

    How can I centralize this jquery styling colors into css?

    How to replace 31 css classes with just one

    How to align this bootstrap radio button?

    How use horizonal scorll div content div

    How to Trigger css animation both on scrolling down and up

    How to do page load in jQuery?

    How to enqueue second stylesheet in Wordpress child theme?