JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser .
center text in div between two div (left and right)
I want to center the form elements in a div (horizontally and vertically). The whole div should be centered and is between a left and a right div.
Problems:
Through the padding the right div is misaligned.
Also the text (Text1) is not correctly vertical aligned. -> padding-top works
The whole content of theform is not horizontal aligned.
Here is an
example .
HTML: \[code\]<div id="top"> <div id="top-background-left"> </div> <div class="external"> <div class="externalinner"> <form id="form" name="form" method="post" action="action.html"> <p style="float: left; padding-right: 10px;">Text1</p> <input name="one" id="one" type="text" size="15" maxlength="10" /> <select name="no" size="1"> <option value="http://stackoverflow.com/questions/11545923/0">0</option> <option value="http://stackoverflow.com/questions/11545923/1">1</option> <option value="http://stackoverflow.com/questions/11545923/2" selected>2</option> <option value="http://stackoverflow.com/questions/11545923/3">3</option> <option value="http://stackoverflow.com/questions/11545923/4">4</option> <option value="http://stackoverflow.com/questions/11545923/5">5</option> </select> <button type="submit">Go</button> </form> </div> </div> <div id="top-background-right"> </div></div>\[/code\]
CSS: \[code\]#top{ padding: 0px; width: 100%; height: 66px; background-color: #efa910; z-index:12; position:fixed; overflow:hidden;}.externalinner { text-align: left; padding-top: 20px;}.external { background: #efa910; text-align:center; margin-left:auto; margin-right:auto; width:900px;}#top-background-left { background: white; width: 150px; height: 66px; float: left;}#top-background-right { background: white; width: 150px; height: 66px; float: right;}\[/code\]
