CODEWITHSUNDEEP
htmlcsscenter
Fabian Schneider
Fabian Schneider

Reputation: 809

Centering a DIV in CSS/HTML

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> &#160&#160&#160&#160&#160&#160Not 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

Upvotes: 1

Views: 75

Answers (2)

user2598812
user2598812

Reputation:

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%">

Upvotes: 1

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

In you CSS for #logo use margin: auto; to center a div, text-align: center will center text:

#logo {
    ...
    margin: auto;
    ...
}

Upvotes: 1

Related Questions