Question

div中的文本（或其他术语中的UL）仅保留在div的右侧。无论我改变什么，它的内容都不会保持中心对齐。

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
        <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
    <div id="wrapper">
        <div id="sidebar">
            <nav id="nav">
                <div id="searchbar">
                    <form action="http://www.example.com/search.php">
                        <input type="text" name="search" placeholder="Enter Book Title"/>
                    </form>
                </div>
                <ul>
                    <li>
                        <a id="firstlink">
                            Home
                        </a>
                    </li>
                    <li>
                        <a id="secondlink">
                            Categories
                        </a>
                    </li>
                    <li>
                        <a id="thirdlink">
                            Bestsellers
                        </a>
                    </li>
                    <li>
                        <a id="fourthlink">
                            Contact
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

CSS：

body{

    background-color: #f1f6f6;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    margin: 2em  1em 1em 1em;
    text-align: right;
    color: #888888;
    display: block;
    max-width: 100%;
}

#nav li{
    list-style-type: none;
}

#searchbar{
    padding-bottom: 0.5em;
    text-align: center;
}

#searchbar input{
    max-width: 100%;
}

#firstlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#secondlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#thirdlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#fourthlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

如果你使用chromes inspect元素查看这个图像，你可以清楚地看到li容器被推到更靠右边，而不是在div中居中。图片在这里 - http://i.imgur.com/GfxLGtl.png

JSFiddle上面包含的代码：

https://jsfiddle.net/4pxw4eus/

Answer 1

我猜你没有使用CSS重置，所以你的UL有一些默认的左边填充。为ul和li添加可见边框以更清楚地查看问题：＆gt;

Answer 2

如果这是你想要完成的。 #nav有一个文本对齐中心，但#nav不是你的UL id，它只是一个包装器。默认情况下，UL元素有一个左边的填充，我已删除。你在包装器上设置了它，为你的左边填充提供了更大的值。

我还删除了你的LI元素顶部/底部填充，并将其添加到链接#nav ul li a，用于UX。

希望这是你一直在寻找的东西。祝你好运！

＆＃13;

body{

    background-color: #f1f6f6;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    margin: 2em 1em;
    color: #888888;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li{
    list-style-type: none;
    padding: 0;
    text-align: center;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
#searchbar{
    padding-bottom: 0.5em;
    text-align: center;
}

#searchbar input{
    max-width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
        <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
    <div id="wrapper">
        <div id="sidebar">
            <nav id="nav">
                <div id="searchbar">
                    <form action="http://www.example.com/search.php">
                        <input type="text" name="search" placeholder="Enter Book Title"/>
                    </form>
                </div>
                <ul>
                    <li>
                        <a id="firstlink">
                            Home
                        </a>
                    </li>
                    <li>
                        <a id="secondlink">
                            Categories
                        </a>
                    </li>
                    <li>
                        <a id="thirdlink">
                            Bestsellers
                        </a>
                    </li>
                    <li>
                        <a id="fourthlink">
                            Contact
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 3

导航下的任何内容都会继承您的text-align:right;。制定新规则：

#nav >li { text-align:center;}

Answer 4

也许这个例子可以帮到你：http://jsfiddle.net/kbw6449r/

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    margin: 2em  1em 1em 1em;
    text-align: right;
    color: #888888;
    display: block;
    max-width: 100%;
}

#searchbar{
    padding-bottom: 0.5em;
    text-align: center;
}

#searchbar input{
    max-width: 100%;
}

#nav ul {
    margin: 0;
    padding: 0;
}
#nav li{
    list-style: none;
    width: 100%;
    text-align: center;
    padding: 0.5em 0 0.5em 0;
}

Answer 5

我认为您需要将UL填充设置为0.请参阅此小提示以查看默认填充如何导致此情况：

#nav > ul { padding:0; }

http://jsfiddle.net/2p6r0e5x/

Answer 6

这可能很好用，试试吧：

.my-div{
    height: 100%; // or whatever
    width: 100%; // or whatever
    display: table;
 }
 .my-div p{
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }

Div内的文字被困在右手边

6 个答案: