wie die Schaltfläche in einer Tabellenzelle zum Zentrum

Question

Ich versuche, durch einen Knopf in der Tabelle zum Zentrum: text-align: center

Allerdings scheint es nicht für mich nicht.

Hinweis: Ich habe Display: table-cell kombinieren mit Vertical-align: middle, um den Text der Schaltfläche zu zentrieren. Wie Sie sehen können, ist der Text der ersten Schaltfläche "AAAAAAA" in der Mitte.

Kann mir jemand helfen, den Knopf zu zentrieren, ohne den Text des Knopfes zu beeinflussen. Vielen Dank im Voraus.

Hier ist der Beispielcode:

http://codepen.io/anon/pen/pAcBx

Answer 1

ändern display: table-cell zu display: inline-block:

.inner_button { 
    /* ... */ 
    display: inline-block; 
    /* ... */ 
} 

Answer 2

ich normalerweise

margin:auto; 
    display:block; 

Ich denke, @rhino Antwort als gut funktioniert. Denken Sie daran, zu entfernen

display:table-cell; 

Answer 3

Sie die div table-cell Anzeigeeigenschaft des Behälters verwenden können, und stellen Sie die vertical-align Eigenschaft middle:

HTML

<div id="table"> 
    <div class="row"> 
     <div class="cell"> 
      <a href="">I'm your button</a> 
     </div> 
    </div> 
</div> 

CSS

#table { 
    width: 300px; 
    display: table; 
    background: red; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    display: table-cell; 
    height: 200px; 
    background: yellow; 
    vertical-align: middle; 
    text-align: center; 
} 

Sie können the fiddle here finden.

Answer 4

das funktioniert

td{ 
    align:center; 
} 

einfach und leicht ... hoffe, es hilft

Answer 5

ich dies dem Tablecell hinzugefügt und es zentriert mein Image. Ich glaube, wir sind auf dasselbe Problem gestoßen.

<asp:TableCell HorizontalAlign="Center" style="padding: 0px;"> 
    <asp:ImageButton/> 
</asp:TableCell> 

gefunden meine Antwort hier: http://forums.asp.net/t/1418752.aspx?image+button+inside+table+cell