использование CSS для центрирования элементов ввода FLOATED, обернутых в DIV

Нет недостатка в вопросах и ответах о центрировании, но я не смог заставить его работать, учитывая мои конкретные обстоятельства, связанные с флоатингом.

Я хочу центрировать контейнер DIV, который содержит три плавающих элемента ввода (разделенная кнопка, текст, флажок), чтобы при изменении размера моей страницы они исходили из этого:

  ||.....[      ][v]     [            ]       [ ] label .....||

к этому

  ||......................[      ][v]     [            ]       [ ] label.......................||

Они хорошо плавают, но когда страница становится шире, они остаются слева:

  ||.....[      ][v]     [            ]       [ ] label .......................................||

Если я удалю поплавок, чтобы входные элементы располагались друг над другом, а не рядом:

  [      ][v]   
  [            ]  
  [ ] label

тогда они правильно центрируются при изменении размера страницы. ТАК, что плавание применяется к элементам DIV#hbox внутри контейнера, который портит центрирование. Является ли то, что я хочу сделать, невозможным из-за того, как работает float?

Вот мой DOCTYPE, и разметка действительно проверяется на w3c:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Вот моя разметка:

 <div id="term1-container">
 <div class="hbox">
    <div>
        <button id="operator1" class="operator-split-button">equals</button>
        <button id="operator1drop">show all operators</button>
    </div>
    <div><input type="text" id="term1"></input></div>
    <div><input type="checkbox" id="meta2"></input><label for="meta2" class="tinylabel">meta</label></div>
 </div>
</div>

А вот (нерабочий) CSS:

  #term1-container {text-align: center}
  .hbox {margin: 0 auto;}
  .hbox div {float:left; }

Я также попытался применить display: inline-block к плавающей кнопке, текстовому вводу и флажку; и хотя я думаю, что это применимо только к тексту, я также попытался применить white-space: nowrap к DIV #term1-container, основываясь на сообщениях, которые я видел здесь, на SO.

И чтобы быть немного более полным, вот jQuery, который создает сплит-кнопку:

$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
   primary: "ui-icon-triangle-1-s"
    }
}).click( function(){positionOperatorsMenu();} )
})

css centering css-float
person Tim    schedule 29.05.2010    source источник
comment
Есть ли причина, по которой вы просто не устанавливаете ширину на .hbox и не устанавливаете поля на margin: 0 auto;?   -  person prodigitalson    schedule 29.05.2010

Ответы (1)


arrow_upward
2
arrow_downward

CSS:

body {
    text-align: center;
}
#term1-container {
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
.hbox div {
    float: left;
}

HTML

   <div id="term1-container">
     <div class="hbox">
        <div>
         <button id="operator1" class="operator-split-button">equals</button>
         <button id="operator1drop">show all operators</button>
        </div>
       <div><input type="text" id="term1"/></div>
       <div><input type="checkbox" id="meta2"/>
      <label for="meta2" class="tinylabel">meta</label></div>
     </div>
    </div>

ОБНОВЛЕНО

если у вас возникли проблемы с установкой фиксированного width:

вы можете использовать что-то вроде этого

body {
    text-align: center;
}
#term1-container {
    display: table;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}
.hbox div {
    display: table-cell;
    display: inline
}
person Luca Filosofi    schedule 29.05.2010
comment
Хотя первый предложенный подход не центрировал плавающие элементы формы, ваше второе предложение (отображение: таблица-ячейка; отображение: встроенный) центрировало их, но они не перемещаются при изменении размера окна. Спасибо за этот совет. Я обнаружил, что обертывание этих элементов в fieldset работает лучше всего. - person Tim; 30.05.2010