Как центрировать список

#html #css

#HTML #css

Вопрос:

Если у меня есть <select> список на моей HTML-странице:

 <body>
<div id="side-bar">...</div>
<div id="list">
       <select id="mylist" size="10"></select>
</div>
</body>

Как изменить CSS mylist, чтобы он располагался в середине <div id="list"> области? (Как по горизонтали, так и по вертикали)

Ответ №1:

Стиль #list {text-align:center; } должен сделать это, хотя это будет горизонтально центрировать все в вашем div.

Чтобы центрировать только select элемент по горизонтали, вы можете использовать #mylist { margin: 0px auto; } . Ознакомьтесь http://bluerobot.com/web/css/center1.html для получения более подробной информации о том, как это работает.

Для центрирования по вертикали «самым простым» подходом было бы использовать HTML-таблицу со стилем ячеек, который содержит vertical-align:middle; . Для подхода, не основанного на таблицах, вы можете использовать что-то вроде этогоhttp://www.jakpsatweb.cz/css/css-vertical-center-solution, но этот подход немного халтурный.

Если вы знаете (или можете установить) высоту вашего содержимого div , то комбинация relative и absolute позиционирования вместе с содержащим div for select может вам подойти.

 <html>
    <head>
        <style type="text/css">
        div
        {
            border: 1px solid black; /* just so we can see the div */
        }
        #list
        {
            height: 400px;
            position: relative;
        }
        #list div
        {
            position:absolute;
            top: 100px;
            text-align: center;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <div id="list">
            <div>
                <select id="mylist" size="10"><option>option 1</option><option>option 2</option></select>
            </div>
        </div>
    </body>
</html>

(Я тестировал это в IE9, FireFox 4 и Chrome 11)

1. Привет, я изменил свой вопрос, я хотел бы поместить mylist в середину области div id = ‘список’. Как вы видели выше, у меня также есть область боковой панели на странице.

2. @Leem: Selects являются встроенными элементами, так что это все равно должно выполняться.

3. Чтобы предотвратить это, не могли бы вы создать отдельный div внутри #list, например #list_container, который имеет значение «выравнивание текста по левому краю; поле: 0 автоматически;» и заданную ширину. Это сделало бы список центрированным без центрирования текста.

4. ваш метод размещает список только по горизонтали, чтобы быть центром, а не по вертикали.

Ответ №2:

Вы могли бы попробовать #mylist {margin: 0 auto} . Он центрирует только элемент select. Если вы хотите центрировать все содержимое внутри вашего div, то #list { text-align: center; } должно получиться.

Редактировать:

Чтобы центрировать тег select как по вертикали, так и по горизонтали, вы можете поступить следующим образом:

 <style type="text/css">
#list {
    width: 200px;
    height: 200px;
    background: #fa2;
}
#mylist {
    width: 100px;
    line-height: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -50px;
}
</style>
<div id="list">
       <select id="mylist">
           <option value="1">test</option>
       </select>
</div>

Ответ №3:

вы можете использовать вот так..

 #mylist{margin-left auto; margin-right:auto;}

Ответ №4:

Я бы, вероятно, выбрал:

 #list {
    width: 100px;
    height: 250px;
    background: #ccc;
    text-align: center;
    display: table-cell;
    vertical-align: middle
}

text-align: center центрировать по горизонтали.
display: table-cell; vertical-align: middle для центрирования по вертикали.

Это будет работать в IE8 и всех современных браузерах.

Смотрите: http://jsfiddle.net/knvV2 /