Centering a DIV in CSS/HTML
Question
I know this question is asked a lot, but i am having a serious problem with my website concerning the centering of a div element. I read through hundreds of answers in blogs or on other websites but couldn't figrue out the problem.
My Website has a Navigation bar on top with a fixed position. This Nav-Bar is in an own div. Then I wanted to have a centered text and a picture. So I wrote another div right below the 1st one and tried very hard to center it. I also tried to copy the CSS-settings from the 1st div that is centered, but it wouldn't work.
However, here is the complete source code and the CSS style sheet:
body { padding:0; margin:0; background-color:#555555; float:left; } #nav { background-color:black; color:white; text-align:center; padding:0px; position:fixed; left:0; right:0; width:100%; } #menue_button { border:0; height:"40px"; width:"40px"; cursor:se-resize; } a { color:white; } input { margin: 0; padding: 2px 0 3px 30px; background-color: #ffffff; font-size: 16px; vertical-align: center; border: none; border-bottom: 3px solid #bdbdbd; border-image: initial; cursor: auto; border-radius: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); } #sewing_menue_bar { margin:0; padding:0; position:fixed; left:0; right:0; top:55px; width:100%; } #logo{ background-color:white; color:black; text-align:center; padding:0px; left:0; right:0; width:100%; margin-top:70px; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>AeroTop</title> <link rel="stylesheet" type="text/css" href="style/Style.css"> </head> <body width="100%"> <div id="nav"> <table width="100%" cellpadding="0px"> <tr> <td width="8%"> <img src="graphics/menue_button.png" border="0" alt="Settings" height="40px" width="40px" title="Settings" style="cursor:pointer"> </td> <td width="38%"> <p id="nav-set"><a href="login_overlay.html">Login</a>       Not a member yet? <a href="register.html">Register!</a></p> </td> <td width="1%"> <p id="nav-set_|">|</p> </td> <td width="30%"> <p id="nav-set"> <input name="q" type="text" placeholder="Auf AeroTop suchen "> </p> </td> </tr> </table> </div> <div id="sewing_menue_bar"> <img src="graphics/sewing_menue_bar_smaller.png"> </div> <div id=logo> <table> <tr> <td width="100%"> <p>test</p> </td> </tr> </table> </div> </body> </html>
Thank you for your help!
Kindest regards Fabian
2 answers
solution1
1 2015-01-10 21:08:25
In you CSS for #logo use margin: auto; to center a div , text-align: center will center text:
#logo {
...
margin: auto;
...
}
solution2
1 ACCPTED
Try this:
body{width: 100%;}
#sewing_menue_bar {
margin: 0;
padding: 0;
position: fixed;
left: 50%;
right: 0;
top: 55px;
width: 100%;
}
#logo table {
width: 100%;
}
This is wrong:
<body width="100%">
You must enter the correct and use style="width:100%" in body tag.
<body style="width:100%">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.