Question

我需要将文本居中在div中，但我不知道如何。如果有人可以帮助我，那将是绝对精彩的。

CSS

#nav    {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}

#nav li {
list-style: none;
float: left;
}

#nav li:hover   {
opacity: .6;
}

HTML

<div id="nav">

<ul>
    <li>Home</li>
    <li>&nbsp;&nbsp;</li>
    <li>Soundcloud</li>
    <li>&nbsp;&nbsp;</li>
    <li>Facebook</li>
    <li>&nbsp;&nbsp;</li>
    <li>Contact</li>
</ul>

Answer 1

使用text-align属性：

#nav li {
    list-style: none;
    float: left;
    text-align:center;
}

但请注意您使用的是float:left，因此除非您设置宽度，否则您实际上看不到任何居中。

Here's a jsFiddle demo

Answer 2

我有点小提琴你可以看到...... http://jsfiddle.net/Azzamean/fjnuw/67/

HTML：

  <div id="menu">
     <header>
         <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Sound Cloud</a>
            </li>
            <li><a href="#">Facebook</a>
            </li>
            <li><a href="#">Contact</a>
            </li>
        </ul>
    </header>
    </div>

CSS：

    ul {
    list-style-type: none;
    padding: 0;
    overflow:hidden;
 }
 a:link, a:visited {
    margin:0 auto;
    display:block;
    width: 120px;
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
  }
  a:hover, a:active {
    background-color:#FFFFFF;
    color:#E80000;
  }
  li {
    display:inline-block;
   }
  #menu {
  background-color:#E80000;
  text-align:center;
  }

如何在我的div中居中文本

2 个答案: