在 CSS/HTML 中居中 DIV

Question

我知道这个问题被问了很多，但我的网站在 div 元素居中时遇到了严重问题。我在博客或其他网站上阅读了数百个答案，但无法解决问题。

我的网站顶部有一个固定位置的导航栏。此导航栏位于自己的 div 中。然后我想要一个居中的文本和一张图片。所以我在第一个下面写了另一个 div 并非常努力地将它居中。我还尝试从居中的第一个 div 复制 CSS 设置，但它不起作用。

然而，这里是完整的源代码和 CSS 风格 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>

感谢您的帮助！
最诚挚的问候 Fabian

Answer 1

在你 CSS for #logo 使用 margin: auto; 居中 div，text-align: center 将居中文本：

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

Answer 2

试试这个：

body{width: 100%;}
#sewing_menue_bar {
    margin: 0;
    padding: 0;
    position: fixed;
    left: 50%;
    right: 0;
    top: 55px;
    width: 100%;
    }
#logo table {
    width: 100%;
}

这是错误的：

<body width="100%">

您必须输入正确的内容并在正文标签中使用 style="width:100%"。

<body style="width:100%">

在 CSS/HTML 中居中 DIV

Centering a DIV in CSS/HTML

html

css

center