Text align center
flexi2202
-
flexi2202 -
flexi2202 -
Bonjour,
je débute en css et je bloque sur une propriété pour centrer un texte horizontalement c est text align center mais pour le positionner en vertical c est quoi ...je cherche mais je trouve pas
en fait j ai fait un tableau en html
et je desire y placer des classes en css
je commence donc par le titre
avec <h3 class="browseProductTitle"> A008POINTURE35 </h3>
que je mets entre <td>et </td>
mais rien a faire il ne veux pas se positionner sur le bord supérieur de mon tableau
que devrais ajouter dans ma classe browseProductTitle
merci de votre aide
je débute en css et je bloque sur une propriété pour centrer un texte horizontalement c est text align center mais pour le positionner en vertical c est quoi ...je cherche mais je trouve pas
en fait j ai fait un tableau en html
et je desire y placer des classes en css
je commence donc par le titre
avec <h3 class="browseProductTitle"> A008POINTURE35 </h3>
que je mets entre <td>et </td>
mais rien a faire il ne veux pas se positionner sur le bord supérieur de mon tableau
que devrais ajouter dans ma classe browseProductTitle
merci de votre aide
10 réponses
-
peut-être essayer de chercher autour de la propriété vertical-align
pour un style appliqué à la cellule de ton tableau (le TD) et non au titre.
exemple de style :.cell { vertical-align: middle }
par exemple :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> .cell { vertical-align: middle } </style> <title></title> </head> <body> <table border="3"> <tr> <td class="cell">oO</td><td> 11<br/>22<br/>33</td> </tr> </table> </body> </html>
PS : en HTML4 le TD possède aussi un attribut "valign" :<td valign="middle">oO</td><td> 11<br/>22<br/>33</td>
-
merci pour la réponse c est gentil pour l exemple
disons que je suis embêter car j ai donc 4 colonnes en html avec a l intérieur des lignes et je souhaiterais faire un cadre autour de chaque colonne ....pour la gauche et la droite aucun soucis je fusionne des lignes mais pour le bas et haut je bloque
donc on me dit que cela est possible en css ....je me casse la tete depuis qlqes heures mais ....j y arrive pas -
tente le style css suivant :
.cell { border-top: 1px solid black; border-bottom: 3px dashed grey; border-left: 1px solid yellow; border-right: 1px solid green; }
avec pour la table (éviter les duplication de bordures je crois) :.table { border-collapse: collapse; } -
cela a l air de fonctionner et pour ceci j ai pas trop bien compris stp
un immense merci a toi
.table {
border-collapse: collapse;
}-
cf. https://www.zonecss.fr/proprietes-css/border-collapse-css.html
en fait dit autrement, ce mode d'affichage évite 2 bordures collées pour 2 cellules de tableau voisines (n'en produit qu'une seule commune).
-
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
et si j ai ceci par exemple
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>cccc</td>
<td>dccc</td>
</tr>
comment faire pour que les cellules a,aa,aaa;aaaa soit entourée par un seul cadre a l intérieur du quel ces cellules seraient -
j ai essayer ceci mais il me reste des traces blanches entre les cellules
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.cell3 {
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
}
.cell2 {
border-right: 1px solid red;
border-left: 1px solid red;
}
.cellb {
border-bottom: 1px red;
border-left: 1px solid red;
border-right: 1px solid red;
}
</style>
<title></title>
</head>
<body>
<table border="0" bgcolor="#dfebff" style="width: 666px; height: 431px;">
<tr>
<td class="cell2">aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td class="cell2">aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td class="cellb">aaaaa</td>
<td>bbbbb</td>
<td>cccc</td>
<td>dccc</td>
</tr>
</tr>
</table>
</body>
</html> -
sans faire 2 tableaux ou sans "rawspan" je dirai comme ceci (même si c'est pas terrible!)
<html> <head> <style type="text/css"> .celltop { border-left: 1px solid grey; border-right: 1px solid grey; border-top: 1px solid grey; } .cellmiddle { border-left: 1px solid grey; border-right: 1px solid grey; } .cellbottom { border-right: 1px solid grey; border-left: 1px solid grey; border-bottom: 1px solid grey; } </style> <title></title> </head> <body> <table cellpadding="3" cellspacing="0"> <tr> <td class="celltop">a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td class="cellmiddle">aa</td> <td>bb</td> <td>cc</td> <td>dd</td> </tr> <tr> <td class="cellmiddle">aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td class="cellbottom">aaaaa</td> <td>bbbbb</td> <td>cccc</td> <td>dccc</td> </tr> </table> </body> </html> -
-
-
