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

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

2 голосов
/ 29 мая 2010

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

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

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

к этому 

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

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

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

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

  [      ][v]   
  [            ]  
  [ ] label

тогда они действительно центрируются правильно при изменении размера страницы. Так что это float, применяемый к элементам 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 к плавающей кнопке, вводу текста и флажку; и хотя я думаю, что это применимо только к тексту, я также попытался применить пробел: 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();} )
})

1 Ответ

2 голосов
/ 29 мая 2010

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
}
...