Mit CSS ausrichten-Steuerelement innerhalb einer div

Ich will center-richten Sie ein GridView-Steuerelement in einem <div>. Aber der GV scheint der Aufenthalt auf der oberen, linken position des div-auch nach Anwendung der folgenden Methoden:

text-align : center und vertical-align : middle liefert keine Ergebnisse.

Weder position : relative oder margin : auto.

<div align="center"> arbeitet für die horizontale Ausrichtung, aber nicht finden können, jede form von valign für eine <div>.

Layout so weit:

<div id="content1" class="contentSingleCenter" >
    <asp:GridView ID="grdGrid" runat="server"></asp:GridView>
</div>

CSS:

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative; 
    margin: auto;
}

Meine wichtigste Voraussetzung ist, dass ich nicht eine Tabelle verwenden, dies zu tun.

Irgendwelche Ideen? TIA.

  • Ist das gridview-eine Feste Größe? Sorry für meine ninja-edit. Ich Las die Frage. 😉
  • div Höhe ist Fix auf 200px, GridView keine.
InformationsquelleAutor Oscar Cheung | 2011-04-07
  1. 0

    Können Sie RowStyle-VerticalAlign="Center" and RowStyle-HorizontalAlign="Center"...

    • Danke für die Antwort, aber es ist nicht das GridView Inhalt möchte ich ausrichten - möchte ich ausrichten, dass die GV selbst.
    InformationsquelleAutor sajoshi
  2. 0

    Versuchen line-height: $height_of_box kombiniert mit text-align: center finden Sie http://jsfiddle.net/ugRd3/.

    Hoffe, es hilft.

    • Dies wird nur funktionieren, wenn der Inhalt ist ein one-liner. Ping mich, wenn Sie brauchen, um gerecht für multi-line-Inhalt innerhalb der box.
    • Danke für die Hilfe, und ja, während dies funktioniert, es scheint unterschiedliche Effekte auf unterschiedliche Steuerungen. Zum Beispiel habe ich versucht, dieses mit einem ASP GridView-ASP-Schaltfläche und DevExpress ASPxGridView. Button richtet richtig, DevEx GridView bleibt auf der top-Links div, aber der ASP GridView geht seltsame und strecthes jede Zelle auf 200 Pixel hoch.
    • Können Sie bitte die HTML-Ihr GV-produziert, um Stil richtig? Danke.
    • Sorry, aber was meinst du? Das markup für meine ASP GridView (nach strectching) ist genau die gleiche wie die in der Q... aber hier ist es: <div id="content3" class="contentSingleCenter"> <asp:GridView ID="c" runat="server" ></asp:GridView> </div>
    • Nonono, ich meinte die HTML-ASP-produziert, wenn von Ihr <asp:GridView ID="c" runat="server" ></asp:GridView>. Sagen Sie, öffnen Sie Ihre Website in einem browser und kopieren Sie den Quellcode produziert, bitte.
    • Nachdem er einige zahlen in: <div id="content3" class="contentSingleCenter"> <div> <table cellspacing="0" rules="all" border="1" id="ctl00_c" style="border-collapse:collapse;"> <tr> <th scope="col">Item</th> </tr><tr> <td>0</td> </tr><tr> <td>1</td> </tr><tr> <td>2</td> </tr><tr> <td>3</td> </tr><tr> </table> </div>
    • Ich sehe jetzt, was Sie zu tun versuchen, und Spiele mit jsFiddle für einige Zeit jetzt zu versuchen Sie zu zentrieren Sie die Tabelle horizontal und vertikal, aber ohne Erfolg, ohne die Breite fest/festgelegt, eher als 80%... Auch die Einstellung der Höhe der Tabelle würde sehr helfen... Scheint, dass, wenn Sie nicht über eine Feste Anzahl von Datensätzen, die in Ihrem Raster/Tabelle es ist nicht möglich, um es vertikal und horizontal, es sei denn, Sie wickeln Sie es in einer anderen Tabelle - die ist eine schreckliche Lösung. jsfiddle.net/ugRd3/1 Sorry.

    InformationsquelleAutor hoopyfrood
  3. 0

    mit dem Attribut line-height könnte für Sie arbeiten, legen Sie es auf die gleiche wie die Höhe des div -

    div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    line-height: 200px; 
    margin: auto;
    text-align:center;
}
    • Danke Dan, aber ich zu haben scheint einige Probleme mit dieser... siehe bitte mein Kommentar zu hoopyfrood Antwort.
    InformationsquelleAutor Dan
  4. 0

    Versuchen Sie dies:

    div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative;
    display: table-cell;
    vertical-align: middle; 
    margin: auto;
}

    Getestet in modernen Browsern und funktioniert ziemlich gut. Sie können margin-left: auto; margin-right: auto; auf das gridview-für die horizontale Zentrierung.

    • Danke für die Antwort, aber sorry, scheint nicht zu funktionieren... 🙁
    • Ohne zu wissen, etwas über Ihre gridview, oder andere CSS auf der Seite, es ist schwierig, das problem zu lösen. Meine Antwort funktioniert ohne irgendwelche anderen Faktoren, so vielleicht gibt es andere Dinge, dies zu verhindern arbeiten. Auch ich bin mit einem strict-doctype. Hätte das erwähnen sollen.
    InformationsquelleAutor Fred Wilson
  5. 0

    Tatsächlich, ich habe gefunden ein Update... <align="center"> und ein bisschen Polsterung scheint zu funktionieren : )

    InformationsquelleAutor Oscar Cheung
  6. 0

    Laut IE9, gridviews und formviews übersetzt werden in Tabellen mit Zeilen, Spalten, etc...
    Daher, um Sie zentriert zu verwenden :

    table
{
margin-left: auto;
margin-right: auto;
}
    InformationsquelleAutor JGM
  7. 0

    Ich weiß, dies ist ein Alter thread, aber hier ist was ich gefunden habe war für mich:

    Asp:GridView-Steuerelement rendert als eine geschachtelte Tabelle innerhalb eines div. Weil dieses, die Anwendung der Stil-direkt an der Steuerung führt nicht zum gewünschten Ergebnis. Ich fand, dass Sie das Format anwenden, um die Tabelle Kind des div-Containers besten funktioniert in meiner Anwendung. Ist dies wirklich nur eine permutation von JGM die Antwort von oben.

    CSS:

    .contentSingleCenter table
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

    Glaube ich würde diese Methode bevorzugen, um die Antwort akzeptiert, weil es mit CSS statt des veralteten align-Attribut.

    InformationsquelleAutor Steve Judd
Schreibe einen Kommentar