comment faire pour centrer le bouton à l'intérieur d'une cellule de tableau

Je suis en train de centre, un bouton à l'intérieur de la table par : text-align: center

Cependant, il semble ne fonctionne pas pour moi.

Remarque: j'ai utilisé Display: table-cell combiner avec Vertical-align: middle centrer le texte du bouton. Comme vous pouvez le voir le texte de la première bouton "AAAAAAA" est dans le milieu.

Quelqu'un peut m'aider à centrer le bouton sans atteinte au texte du bouton.
Je vous remercie à l'avance.

Voici l'exemple de code:

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

display:table-cell; Pourquoi voudriez-vous faire cela?
parce que je veux que le texte dans le bouton pour être à la verticale du milieu ainsi, s'il vous plaît re-visiter le lien, j'ai juste fait le un peu modifier pour le premier texte du bouton.
Je vois. Tout comme la plupart des gens, je crois que vous avez mal compris le sens de vertical-align. Il n'est pas, pour aligner le contenu verticalement; c'est pour dire au navigateur comment traiter inline blocs sur le caractère de base.

InformationsquelleAutor shensw | 2014-06-08

css html

J'ai l'habitude de faire

  margin:auto;
  display:block;

Je suppose @rhino réponse fonctionne aussi bien. N'oubliez pas de retirer

  display:table-cell;

EDIT:

Garder à l'esprit qu'en faisant cela, vous obtenez la a élément contenu centrée verticalement, mais si vous donnez aussi la a élément arbitraire de la hauteur, l'entourant de fond ne sera pas centré.

Exemple 1: le texte est centrée verticalement. Mais vous réglez le bouton de la hauteur de 32px et l'environnement de conteneur n'est pas:

CSS:

table, tr, td{
border: solid;
}
.my_table {
width: 312px;
margin: 0 auto;
}
.dashed {
border-bottom:1px dashed #99F;
width:100%;
display:block;
position:absolute;
font-size:0;
top:43px;
}
/*BUTTON TABLE left CELL*/
.left_button_cell{
margin: 0 auto;
text-align: center;     /*<---- NOT WORKING */
height: 50px;
padding-top: 10px;
line-height: 22px;
}
/*BUTTON TABLE right CELL*/
.right_button_cell{
text-align: center; 
height: 50px;
padding-top: 10px;
line-height: 22px;
}
.inner_button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#fbfbfb;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topright:8px;
border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
border-bottom-left-radius:8px;
text-indent:0;
border:2px solid #dcdcdc;
display:block;
margin:auto;
color:#939393;
font-family:arial;
font-size:15px;
font-weight:normal;
font-style:normal;
height:32px;
line-height:16px;
width:104px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
word-wrap:break-word;
vertical-align:middle;
}
.inner_button:hover {
background-color:#EBEBEB;
}
.inner_button:active {
position:relative;
top:1px;
}

HTML:

<div class="dashed"></div>
<table class="my_table">
<tbody>
<tr>
<td class="left_button_cell">
<a class="inner_button" href="#">AAAAAAAA</a>
</td>
<td class="right_button_cell">
<a class="inner_button" href="#">BBBBBBBB BBBBBBBB</a>
</td>
</tr>
</tbody>
</table>

Vous pouvez définir la hauteur de la ligne à être aussi 32px, qui travaillerait pour le premier bouton, mais la seconde se briser. Aussi, vous pouvez définir un bouton de rembourrage de 6px pour obtenir le même résultat sans déclarer explicitement la hauteur (comme des frameworks css comme bootstrap ou matérialiser le faire), mais le saut de ligne sur le deuxième bouton en résulterait inégale de la taille des boutons.

Donc, voici ma suggéré truc: définir la a élément de la ligne de hauteur à 32px, puis les envelopper son intérieure du texte dans un span élément lorsque vous réinitialisez la hauteur de la ligne de 16px:

CSS:

table, tr, td{
border: solid;
}
.my_table {
width: 312px;
margin: 0 auto;
}
/*BUTTON TABLE left CELL*/
.left_button_cell{
margin: 0 auto;
text-align: center;     /*<---- NOT WORKING */
height: 50px;
padding-top: 10px;
line-height: 22px;
}
/*BUTTON TABLE right CELL*/
.right_button_cell{
text-align: center; 
height: 50px;
padding-top: 10px;
line-height: 22px;
}
.inner_button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#fbfbfb;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topright:8px;
border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
border-bottom-left-radius:8px;
text-indent:0;
border:2px solid #dcdcdc;
display:block;
margin: 0 auto;
color:#939393;
font-family:arial;
font-size:15px;
font-weight:normal;
font-style:normal;
height:32px;
line-height:32px;
width:104px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
word-wrap:break-word;
vertical-align:middle;
}
.inner_button span {
line-height:16px;
display:inline-block;
}
.inner_button:hover {
background-color:#EBEBEB;
}
.inner_button:active {
position:relative;
top:1px;
}

HTML:

<table class="my_table">
<tbody>
<tr>
<td class="left_button_cell">
<a class="inner_button" href="#">
<span>AAAAAAAA
</span>
</a>
</td>
<td class="right_button_cell">
<a class="inner_button" href="#">
<span>BBBBBBBB BBBBBBBB</span>
</a>
</td>
</tr>
</tbody>
</table>

hmmm, j'ai utilisé 'display:table-cell' de milieu, le texte du bouton, j'ai un peu modifier pour le premier bouton, merci de revisiter l'exemple de lien, vous verrez le problème.
J'ai essayé sur votre exemple. Remplacement de table-cell pour le bloc, et en ajoutant margin:auto a fait l'affaire pour moi.
mais le texte du bouton ne serait pas centré. Je veux garder le texte du bouton centré ainsi que la position du bouton.
Je suis désolé, j'ai pris 4 ans pour répondre à votre commentaire. J'ai édité ma réponse pour vous aider à atteindre les résultats souhaités.

InformationsquelleAutor amenadiel

1

Changement display: table-cell à display: inline-block:
```
.inner_button {
/* ... */
display: inline-block;
/* ... */
}
```
InformationsquelleAutor rhino
0

J'ai ajouté ceci à la TableCell et qu'il soit centré mon ImageButton. Je pense que nous avons été en cours d'exécution dans la même question.
```
<asp:TableCell HorizontalAlign="Center" style="padding: 0px;">
<asp:ImageButton/>
</asp:TableCell>
```
Trouvé ma réponse ici: http://forums.asp.net/t/1418752.aspx?image+bouton+intérieur+table+cellule

InformationsquelleAutor John

-1

Vous pouvez utiliser le table-cell propriété d'affichage de la div conteneur et de définir la vertical-align propriété 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;
}

Vous pouvez trouver le violon ici.

InformationsquelleAutor arielnmz

-2

cela fonctionne
```
 td{
align:center;
}
```
simple et facile... j'espère que ça aide
- en quelque sorte il ne fonctionne pas pour moi 🙁
- je l'ai testé dans le lien que vous avez fourni... ET il semble fonctionner pour moi ... pouvez-vous vérifier de nouveau.
- J'ai vérifié, ne fonctionne pas pour moi, je veux que le texte du bouton pour être centré ainsi que "le bouton lui-même", et je pense que vous vouliez dire align-content: center bien, j'ai essayé avec Chrome ainsi (align-content pris en charge uniquement par Ohrome et Opéra), ne fonctionne toujours pas , merci pour votre suggestion mais
InformationsquelleAutor nikhil

Vous devez vous connecter pour publier un commentaire.