0

I want to center the text on each button in a menu I made, but with "text-align:center;" the button texts gets in the center of the MENU instead of in the center of each button. I feel like I've tried everything. What is the answer here?

ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none; 
    font-family:Lato, verdana, "times new roman";
    font-size:14px;
    width:520px; }

ul.sdt_menu a{
    text-decoration:none;
    outline:none; }

ul.sdt_menu li{
    float:left;
    width:100px;
    height:55px;
    position:relative;
    cursor:pointer; }

ul.sdt_menu li > a{
    position:absolute;
    top:-1px;
    left:-20px;
    width:100px;
    height:67px;
    z-index:12;
    background:transparent url(../img/overlay2.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000; }

ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000; }

ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:20px;
    left:4px;
    width:170px;
    height:60px;
    z-index:15; }

ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:65px;
    width:100px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset; }

ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{
    margin-left:20px;
    text-transform:none;
    text-shadow:1px 1px 1px #000; }

ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:20px;     font-family: Lobster, "Arial Black", Gadget, sans-serif;    text-shadow: 3px 3px 2px #000;
    float:left;
    clear:both; }

ul.sdt_menu li span span.sdt_descr{
    color:#1f051e;  
    float:left;
    clear:both;
    width:155px;
    font-size:12px;     font-family: Lato, verdana, "times new roman";
    letter-spacing:1px; }

ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000; }

ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#871b4c; }

ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px; }

ul.sdt_menu li div.sdt_box a:hover{
    color:#fff; }

And here's the HTML:

 <ul id="sdt_menu" class="sdt_menu">
    <li>
        <a href="index.html">
            <img src="img/andrea.jpg" alt=""/>
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
                <span class="sdt_link">Home</span>
                <span class="sdt_descr">Andrea</span>
            </span>
        </a>
    </li>       <li>
        <a href="gallery.html">
            <img src="img/mywork2.jpg" alt=""/>
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
                <span class="sdt_link">Portfolio</span>
                <span class="sdt_descr">My work</span>
            </span>
        </a>
    </li>       <li>
        <a href="contact.html">
            <img src="img/contact2.jpg" alt=""/>
            <span class="sdt_active"></span>
            <span class="sdt_wrap">
                <span class="sdt_link">Contact</span>
                <span class="sdt_descr">Email me</span>
            </span>
        </a>
    </li> </ul>
4

1 回答 1

0

请用

display : inline;

请删除所有

float:left;

所以菜单会居中对齐

那是

CSS

 .sdt_menu {
           text-align: center;
           }   
 .sdt_menu li {
           display: inline;
           }

HTML

<ul class="sdt_menu">
        <li>Menu1</li>
        <li>Menu1</li>
        <li>Menu1</li>
        <li>Menu1</li>
        <li>Menu1</li> 
</ul>
于 2013-09-17T08:55:15.597 回答