HTML - Zentrieren von DIV-Inhalt

Ich versuche zu spannen und zentrieren Sie den Inhalt des div mit der Klasse test1. Spanning das div über die volle Breite der Seite funktioniert. Aber zentrieren Sie den Inhalt in das div nicht. Was ist eigentlich mit align=center einfach?

<style>
    div.test1
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    div.test2
    {
        display: inline;
        float: left;
    }
</style>

<div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>
  • Sie div ist zentriert. Aber es ist auch 100% Breite...
  • Sie können nicht Zentrum Inhalt von test1 wenn der Inhalt float-Attribute.. auch, wenn es schwebte Sie nicht brauchen, display:inline; entweder als schwimmende gilt dies
  • Er ist nicht schwimmenden div.test1
  • Nein, er schwimmt test2, was der Inhalt/Kind test1
  • So what? natürlich sind Sie in der Lage zu zentrieren eines div-enthält schwebende Mitglieder. Sie brauchen nur einen clearfix.
  • die schwebte content wird nicht zentriert werden, nur das übergeordnete element, das schwebte Inhalte werden so ausgerichtet, unabhängig von float, die Sie zugeordnet haben. test2 immer sitzen auf der linken Innenseite test1 - obwohl das Lesen der OP wieder kann ich des falsch verstanden, die Anfrage. & So sind Sie richtig, die Eltern zentriert ist, - natürlich. Ich hatte den Eindruck, der Antrag wurde für die Kinder (test2) werden zentriert innerhalb des übergeordneten test1 100% Breite.

InformationsquelleAutor craig1231 | 2012-10-09
  1. 5
    div.test1 {
    text-align: center;
}
div.test2 {
    display: inline-block;
    *display: inline; /* IE7 fix for inline-block */
    *zoom: 1;         /* IE7 fix for inline-block */
}

    jsfiddle demo

    • Diese Art gab mir die richtige Antwort, obwohl ich Sie entfernt den IE 7 behoben und verwendet display:inline. Es funktioniert für meinen test habe ich, aber nicht für die gesicherten Daten (die ich nicht zeigen kann)
    • Wenn Sie in styling-Fragen, display:inline-block bietet größere Flexibilität und Kontrolle für die styling-Elemente als display:inline. In einigen Fällen, die Einstellung der div display:inline funktioniert möglicherweise nicht wie erwartet.
    InformationsquelleAutor Matt Coughlin
  2. 2

    versuchen Sie dies:

    <style>
    div.test1
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

</style>

<div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>
    • der Inhalt von test1 nicht mehr ausgerichtet werden nebeneinander.. also die OP mit floats ausrichten der divs zusammen
    InformationsquelleAutor mr.soroush
  3. 2

    Was ist eigentlich mit align=center einfach?

    Den align tag ist veraltet. Es würde nicht funktionieren, in diesem Fall, sowieso.

    Verwenden display: inline-block; statt float: left; (und entfernen Sie die display: inline; Teil, natürlich). Gefloateten Elemente können nicht zentriert werden.

    • Sie schlagen mich zu es um Sekunden 🙂 Trotzdem plus 1 als das, was ich sagen wollte
    • Ich vermute, dass diejenigen, die downvotes kommen von Menschen, die wollen, dass Ihre Antworten zu schweben nach oben. Ich könnte falsch sein, wenden Sie sich bitte schreiben Sie einen Kommentar.
    InformationsquelleAutor Chris
  4. 1

    Setzen Sie einfach <center> vor dem Start der div und </center> nach dem schließen der div. Wie diese:

    <center>
    <div class="test1">
    <div class="test2">This</div>
    <div class="test2">Is</div>
    <div class="test2">A</div>
    <div class="test2">Test</div>
</div>
</center>
    InformationsquelleAutor Ian David Bocioaca
  5. 0

    Verwenden Sie css-code :

    .test1 .test2{
   width:100%;
   text-align:center;
 }

    beste Grüße

    • Ich möchte die darin enthaltenen divs nebeneinander...
    • u löschen width:100% und schreiben von float right
    InformationsquelleAutor Saeed
  6. 0

    Divs sind block-level-Elemente. Spannweiten sind inline. Sollten Sie einen größeren div-und span-die kleineren Elemente im inneren.

    InformationsquelleAutor A McGuinness
Schreibe einen Kommentar