Отцентрируйте ul внутри div (внутри div), который сам центрируется на странице - PullRequest
Новая
       4

Отцентрируйте ul внутри div (внутри div), который сам центрируется на странице

0 голосов
/ 30 декабря 2010

Я пытаюсь центрировать свое меню CSS, но у меня возникают проблемы, в основном, я бы хотел, чтобы оно было в центре моего content div.В настоящее время он отображается слева.Кто-нибудь знает, что я должен добавить, чтобы достичь того, чего я хочу?Ниже мой код.

Мой index.html 

<head>

<meta content="en-ie" http-equiv="Content-Language" />

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

 <title>Title</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="contain">

    <div id="header">

        <p><img alt="" height="67" src="header.png" width="431" /><br />
        </p>
    </div>

<div id="tabs">
    <ul>
        <li><a href="http://www.free-css.com/"><span>Item 1</span></a></li>
        <li><a href="http://www.free-css.com/"><span>Item 2</span></a></li>
        <li><a href="http://www.free-css.com/"><span>Item 3</span></a></li>
    </ul>
</div>

<div id="content">


</div>

<div id="footer" style="width: 93px; height: 12px">

</div>

 </body>

</html>

Мой стиль. Css 

body{
background-color: #292929;

}
  p{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
    }

   h2{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
    }

    a:link {
    COLOR: #00CCFF;
    }
   a:visited {
     COLOR: #00CCFF;
   }
   a:hover {
    COLOR: #00CCFF;
     }
  a:active {
   COLOR: #00CCFF;
    }

   /* DIV's */

   #contain {
background-color:#444343;
width: 700px;
margin-left: auto ;
margin-right: auto ;
opacity: .5;
    }
    #header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
    }

   #content { 
float: left;
width: 700px;
margin-left: auto ;
margin-right: auto ;

    }

    #footer {
color: white;
font-size:10px;
width: 11px;
margin-left: auto ;
margin-right: auto ;

}

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

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

    #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;
}

Ответы [ 2 ]

3 голосов
/ 30 декабря 2010

Вы можете установить фиксированную ширину для #tabs ul (например, width:200px;), а затем изменить margin:0; на margin:0 auto; для #tabs ul

1 голос
/ 30 декабря 2010

Если я правильно понял, вам нужно горизонтальное центрирование блока неизвестной ширины. Я вижу два подхода:

  1. Простой способ: вы пропустите всю необычную разметку ваших вкладок, сохраните только встроенные ссылки во встроенных LI и добавите display: block; к своему правилу #tabs ul. Никаких плавающих, никаких блоков в меню, просто обычный встроенный текст. Это будет работать, но не будет слишком «стилизованным». pastebin.me/58fe73dd82496444fd7e129fc5830b4b

  2. Сложный: добавьте дополнительную обертку вокруг ul, и вы получите #tabs #tabs-in ul li …


    #tabs {
    float:left;
    width:100%;
    position: relative;
    }

    #tabs-in { 
    position: relative;
    float: left;
    left: 50%;
    }
    #tabs ul {
    margin:0;
    padding:0;
    list-style:none;
    text-align: center;
    display: block;
    overflow: hidden;
    float: left;
    position: relative;
    left: -50%;
    }
    #tabs li {
    display:block;
    float: left;
    margin:0;
    padding:0;
    }

http://pastebin.me/23c1b8a60657962f1d8c8baef2700473 Этот старый трюк "сдвинь его на половину ширины вправо и затем на половину собственной ширины влево" работает довольно хорошо. Но удачи в дальнейшей разработке и совместимости между браузерами:]

...