Тізімдегі <UL> орталығын қалай ортаға қою керек

Мен шеше алмайтын мәселе бар.

Менде осындай тізімдер тізімі бар:


осы CSS арқылы:

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

#nav {
    width: 45em;
    margin: 0 auto;
}

#nav a {
    display: block;
    width: 15em;
}

#nav li {
    float: left;
    width: 15em;
}
#nav li ul {
    position: absolute;
    width: 15em;
    left: -500em;
}

#nav li:hover ul {
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
.item{
    color:#0E4063;
    text-decoration:none;
}
.tabquad{
    color:white;
    margin:auto;
    position:relative;
    border:1px solid #000;
    border-color:rgb(82,115,154);
    width:200px;
    height:30px;
    text-align:center;
    padding-top:10px;
    top:25px;
    background-color:rgb(0,56,130);
}
    .tabquad:hover{
    background-color:rgb(49,87,132);
    cursor: hand;
}

Менің мәселе: 1-тармақтың және 2-тармақтың тізімі менің беттің ортасында емес, олар сол жаққа бағытталған.

Мен центр параметрімен және қалқымалы терезесінде сәттіліксіз тырыстық.

Кез келген ұсыныс?

You can find a fiddle here: Link

1
Ені PX мәніне өзгертіңіз
қосылды автор jao, көзі
флоат жоқ: орталық;
қосылды автор Aravind30790, көзі
<div float = «center»> ?? Бұл мүлдем дұрыс емес. Скриптті тексеріп, жаңартыңыз.
қосылды автор Nitesh, көзі
@DerekHenderson проблемасы - бұл кішкене аймақ, сондықтан ол орталықтандырылған көрінеді
қосылды автор ta-run, көзі
Рахмет, сиқыр жаңартылды. Қате үшін кешірім сұраймыз ...
қосылды автор abierto, көзі
Маған бұл көлденең орналасу керек, ал бұл ...
қосылды автор abierto, көзі

7 жауаптар

#nav енін дұрыс мәнге (мазмұнның еніне сәйкес) орнатуыңыз керек. төмендегі мәнге мысалыңызды өзгертіңіз және екі мәзірлер бетке ортақ болады.

#nav {
    width: 30em;
    margin: 0 auto;
}

updated jsFiddle: http://jsfiddle.net/F9Wrb/17/

және кросс-шолғыш үйлесімділігін арттыру үшін, #nav сіздің ата-ана түйініне келесі CSS қосыңыз:

body {
    text-align: center;
}
4
қосылды

Оны ортасында қалаған жерге қойыңыз:

div align="center" 
3
қосылды
1990 жылы;)
қосылды автор Djave, көзі
ogg -.- бірдей нәрсеге редакцияланған
қосылды автор Diogo Filipe Cardoso, көзі

Жай ғана дивизионға енін енгізіңіз, содан кейін оны маржа етіп өзгертіңіз: 0 автокөлік, ол оны бетке қояды.

.center{
    width:400px;
    margin:0 auto;
}

Және float = «center» емес, html

<div class="center">    

http://jsfiddle.net/F9Wrb/12/

As mentioned, there is no such thing as float="center", or for that matter, float:center;! For advanced positioning of elements, I'd recommend using a CSS framework such as zurb foundation or Gridpak.com

2
қосылды
Егер сіз ені үшін пайызды пайдалансаңыз, ол әлі де сұйықтық болады және маржа трюсі жұмыс істейді.
қосылды автор Derek S. Henderson, көзі
Бұл орталықтандырылған емес.
қосылды автор Derek S. Henderson, көзі
@NathanLee бұл мәселеде ...
қосылды автор Djave, көзі
@Bondye oops, edited :)
қосылды автор Djave, көзі
Бірақ ені кез-келген нәрсе болуы мүмкін, себебі бұл скрипка 400px жұмыс істейді, бірақ веб-сайт үшін сұйықтық болуы керек. Мәселе сұйықтық немесе% жиіліктің ені үшін жұмыс істей береді. (Менен негатив жоқ)
қосылды автор Nitesh, көзі
Оп дегеніміз бұл Менің мәселе: 1-тармақ және 2-тармақ тізімі менің беттің ортасында емес . Ол тіркелген немесе сұйық ені туралы айтқан жоқ. Бірақ беттің ортасында БАРЛЫҚ Скриншоттар 1024 пиксель экран немесе 1920px экранды ауа-райы ретінде қабылдайды. Осылайша кез-келген экран үшін 400 пиксель шешуші болып табылмайды. (Менден жаңа негативтер жоқ) - @Djave
қосылды автор Nitesh, көзі
#nav a {
    display: block;
    width: 15em;
    margin:auto;
}

#nav>li {
    width:50% !important;
}

#nav li:hover ul {
    position:relative;
    left: auto;
}

Осы өзгерістерді CSS-де жасаңыз және тізімдер сіздің бетіңіздің ортасында болады.

1
қосылды
Сіз оны мына жерден біле аласыз jsfiddle.net/F9Wrb/27
қосылды автор Siddharth Nagar, көзі

Үш шешім:

  1. Using absolute positioning and a negative left margin:

    #nav {
        position: absolute;
        left: 50%;
        margin: 0 0 0 -15em;
    }
    

    Demo 1

  2. Using auto margins with ul width specified:

    #nav {
        width: 30em;
        margin: 0 auto;
    }
    

    Demo 2

  3. If you want to use the auto-margin solution and don't want to specify the ul width, declare the LIs as display: inline-block (instead of floating them). This works because the LIs will now be in the page flow instead of out of it, as they are when floated. Answer courtesy of Kashif Raza.

    #nav {
        margin: 0 auto;
    }
    #nav > li {
        display: inline-block;
        width: 15em;
    }
    

    Demo 3

0
қосылды

Сіз CSS-ны беттерді орталықтандыру және бет орналасуларының негіздері туралы оқып білгіңіз келуі мүмкін.

Normally, you'd have a "container" <div> that contains the entire page and defines the layout and boundaries of the page. You can call it anything (not necessarily container)

Now, you need to decide what layout fits you best, most commonly used layout sizes can vary anywhere between 960px to 1200px.

general styling for your container would be,

.container{
    width:960px; //<-- this can be anything, based on your layout.
    margin:0 auto;
}

This ensures your page is centered almost always. You would want to use some kind of a CSS Reset to ensure you reset browser defaults

0
қосылды

Here is your solution. I have just changed these two styles. FYI, unless you are using html5, you cannot put div inside tag; it's invalid.

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align:center
}
#nav li {
    width: 15em;
    display:inline-block;
}
0
қосылды
Сиқырды ұсынғаныңыз үшін рахмет.
қосылды автор Derek S. Henderson, көзі
Егер ОП html5 болса, ол a ішіндегі a кодын енгізе алады!
қосылды автор Derek S. Henderson, көзі
Иә, ол jsfiddle.net/F9Wrb/31 тексеріңіз
қосылды автор Raza, көзі
О, иә мен бұл туралы ұмытып, бірақ төмен дауыс қажет емес, мен мәселені шешті: /
қосылды автор Raza, көзі