Question

I am experimenting with following HTML code. It displays a paragraph and two buttons at the bottom (Back and Next).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML Test</title>

<!-- stylesheet -->
        <style type="text/css" media="screen">
<!-- for UL. Hopefully straightforward to understand-->    
            #navigation {
            list-style-type:none;
            border-top:1px solid red;
            margin:0;
            padding:0;
            }
    <!-- to float left.Hopefully straightforward to understand -->
            ul#navigation .left{
                float:left;
                width:5em;
                margin: 10px 0 0 0;
            }
    <!-- to float right. Hopefully straightforward to understand -->
            ul#navigation .right {
                float:right;
                width:5em;
                margin: 10px 0 0 0;
            }
    <!-- for a in li. Hopefully straightforward to understand -->
            ul#navigation li a {
            display:block;
            padding:.2 em;
            color:#fff;
            width:5em;
            background-color:#00f;
            text-align:centre; <!-- this isn't effective!-->
            text-decoration:none;
            }

        </style>
    </head>
<!-- mainbody-->

I want the text in to be centrally aligned but it doesn't. I have used text-align:centre to set style of . What am I doing wrong?

<body>


    <p>
        1. Some Para.
    </p>
    <ul id="navigation" >
    <!-- The Back and Next should centre up but they are left aligned -->
        <li class="left"> <a href="#">Back</a></li>
        <li class="right"> <a href="#">Next</a></li>
    </ul>


    </body>
    </html>

Answer 1

您需要使用text-align: center，而不是'中心'。

ul#navigation li a {
    display: block;
    padding: .2 em;
    color: #fff;
    width: 5em;
    background-color:#00f;
    text-align: center;
    text-decoration: none;
}

Answer 2

centre;＆lt; - 错误的词......它的center

＆＃13;

#navigation {
            list-style-type:none;
            border-top:1px solid red;
            margin:0;
            padding:0;
            }
            ul#navigation .left{
                float:left;
                width:5em;
                margin: 10px 0 0 0;
            }
            ul#navigation .right {
                float:right;
                width:5em;
                margin: 10px 0 0 0;
            }
            ul#navigation li a {
            display:block;
            padding:.2 em;
            color:#fff;
            width:5em;
            background-color:#00f;
            text-align:center;/*centre;<-- wrong word... it's center */
            text-decoration:none;
            }

＆＃13;

<p>
        1. Some Para.
    </p>
    <ul id="navigation" >
        <li class="left"> <a href="#">Back</a></li>
        <li class="right"> <a href="#">Next</a></li>
    </ul>

＆＃13;

Answer 3

#navigation {
  list-style-type: none;
  border-top: 1px solid red;
  margin: 0;
  padding: 0;
}
ul#navigation .left {
  float: left;
  width: 5em;
  margin: 10px 0 0 0;
}
ul#navigation .right {
  float: right;
  width: 5em;
  margin: 10px 0 0 0;
}
#navigation ul li {
  color: #fff;
  width: 100%;
  background-color: #00f;
  text-align: center;
  text-decoration: none;
}

<p>1. Some Para.</p>
<ul id="navigation">
  <li class="left"> <a href="#">Back</a>
  </li>
  <li class="right"> <a href="#">Next</a>
  </li>
</ul>

text-align：center未在<a>

3 个答案: