Es gibt viele Fragen und Antworten zum Thema Zentrierung, aber ich habe es unter meinen besonderen Umständen, nämlich dem Schweben, nicht hinbekommen.
Ich möchte einen Container DIV zentrieren, die drei schwebende Eingabeelemente (Split-Button, Text, Checkbox) enthält, so dass, wenn meine Seite breiter geändert wird, sie von diesem gehen:
||.....[ ][v] [ ] [ ] label .....||hierzu
||......................[ ][v] [ ] [ ] label.......................||Sie lassen sich gut verschieben, aber wenn die Seite breiter wird, bleiben sie auf der linken Seite:
||.....[ ][v] [ ] [ ] label .......................................||Wenn ich den Float entferne, so dass die Eingabeelemente gestapelt sind und nicht nebeneinander liegen:
[ ][v]
[ ]
[ ] labeldann werden sie korrekt zentriert, wenn die Größe der Seite geändert wird. SO ist es der Float, der auf die Elemente des DIV#hbox innerhalb des Containers angewendet wird, der die Zentrierung durcheinander bringt. Ist das, was ich tun möchte, aufgrund der Funktionsweise von Float unmöglich?
Hier ist mein DOCTYPE, und das Markup ist bei w3c validiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Hier ist mein Aufschlag:
<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>Und hier ist das (nicht funktionierende) CSS:
#term1-container {text-align: center}
.hbox {margin: 0 auto;}
.hbox div {float:left; }Ich habe auch versucht, die Anzeige: inline-block auf die schwebende Schaltfläche, die Texteingabe und das Kontrollkästchen anzuwenden; und obwohl ich denke, dass es nur für Text gilt, habe ich auch versucht, die Leerzeichen: nowrap zum #term1-container DIV, basierend auf Beiträgen, die ich hier auf SO gesehen habe.
Und nur um ein wenig mehr vollständig zu sein, hier ist die jQuery, die den Split-Button erstellt:
$(".operator-split-button").button().click( function() {
alert( "foo" );
}).next().button( {
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
}).click( function(){positionOperatorsMenu();} )
})
