Как мне центрировать это меню? - PullRequest
Новая
       7

Как мне центрировать это меню?

1 голос
/ 21 апреля 2011

Как мне центрировать это меню CSS ?Когда я уменьшаю масштаб, он остается влево.

Пожалуйста, ответьте, если возможно, полным новым кодом. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>10</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1>&nbsp;</h1>
<div id="tabs">
  <ul>
    <li><a href="http://www.free-css.com/"><span>CSS Templates</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Layouts</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Books</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Menus</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Tutorials</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Reference</span></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.exploding-boy.com/" title="explodingboy"><span>explodingboy</span></a></li>
  </ul>
</div>
</body>
</html>

    body {
    font: bold 11px/1.5em Verdana;
    }

h1 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin:0;
    padding:0;
    }

hr {
    border:none;
    border-top:1px solid #CCCCCC;
    height:1px;
    margin-bottom:25px;
    }

    #tabs {
    text-align: center
}
#tabs ul {
    display: inline-block;
    padding: 10px 0 0 0
}

#tabs {
    float:left;
    width:100%;
    font-size:93%;
    border-bottom:1px solid #2763A5;
    line-height:normal;
    }

#tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }

#tabs li {
    display:inline;
    margin:0;
    padding:0;
    }

#tabs a {
    float:left;
    background:url("tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }

#tabs a span {
    float:left;
    display:block;
    background:url("tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
    color:#FFF;
    }

#tabs a:hover {
    background-position:0% -42px;
    }

#tabs a:hover span {
    background-position:100% -42px;
    }

Ответы [ 4 ]

2 голосов
/ 21 апреля 2011 
#tabs {
  border-bottom:#2763a5 1px solid;
  font-size:93%;
  line-height:normal;
  width:100%;
  text-align:center;
}

#tabs ul {
  display:inline-block;
  display: -moz-inline-stack; // Firefox 2 doesn't understand inline-block but this acts the same
  zoom: 1; // Make IE7 display inline-block correctly
  *display: inline; // Only targets IE6 & IE7
  list-style-image:none;
  list-style-type:none;
  margin:0;
  padding-bottom:0;
  padding-left:50px;
  padding-right:10px;
  padding-top:10px;
}

(Я стараюсь избегать использования inline-block, потому что он не поддерживается корректно во многих браузерах. Здесь inline будет работать нормально.) с кросс-браузерными взломами, чтобы убедиться, что он работает во всех основных браузерах.

1 голос
/ 21 апреля 2011

Если вы можете установить фиксированную ширину для ul внутри #tabs, это относительно просто: 

#tabs ul {
    width: 730px;
    margin: 0 auto
}

Если вы не можете (или не хотите) устанавливать фиксированную ширину, вы можете использовать display: inline-block: 

#tabs {
    text-align: center
}
#tabs ul {
    display: inline-block;
    padding: 10px 0 0 0
}

Если вы заботитесь о IE7, используйте: 

#tabs ul {
    display: inline-block;
    *display: inline;
    zoom: 1;
    padding: 10px 0 0 0
}

См. этот ответ для получения более подробной информации.

1 голос
/ 21 апреля 2011

Удалить float: left и padding для #tabs a,

Добавить display: inline-block и 1px solid # 2763A5 для #tabs li

Последний, #tabs ul получает text-align: center.

Надеюсь, это имеет смысл

0 голосов
/ 21 апреля 2011

изменить вкладки на это: 

#tabs {
   float: left;
   width: 50%;
   font-size: 93%;
   border-bottom: 1px solid #2763A5;
   line-height: normal;
   margin: 0 auto;
}
/*and*/

#tabs a span {
   /* remove float*/
}
...