alignement vertical texte dans <div>

**thomasaurelien** · 18/07/2012, 16h55

Bonjour à vous,

Après plusieurs recherches sur le net j'ai vu que mon problème était récurent quand à alignement vertical d'un texte.

voici mon code :
css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<head>
	<STYLE type="text/css">
		.combine-box-new
		{
			height:2140px;
			position:relative;
			overflow-x:auto;
			overflow-y:hidden;
			border:1px solid #ccc;
		}
		<!-- /*cadre joueur & gagnant*/-->
		.joueur,.joueurh,.joueurb,.gagnant{
			display:block;
			width:150px;
			height:25px;
			background:#E4FDFA;
			position:absolute;
		}
	</STYLE>
</head>
<body>
<!-- cadre bordure page -->
<div class="combine-box-new" style="">
	<!---------->
	<!--TOUR 1-->
	<!---------->
	<!-- équipe 1 -->
	<div class="joueur"  style="top:5px; left:19px;">thomas/zidane</div>
</div>

vertical-align:center ne fait pas de changment dans la classe joueur

**Muchos** · 18/07/2012, 18h03

C'est vertical-align: middle;

**patrickbaras** · 18/07/2012, 18h13

Envoyé par Muchos

C'est vertical-align: middle;

je viens d'essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
h1 {
border:solid 1px #FF0000;
text-align:center;
height:100px;
vertical-align:middle;
}

c'est pas centré verticalement.

**thomasaurelien** · 19/07/2012, 09h38

La logique voudrais vertical-align:middle mais comme patrickbaras cela ne marche

**FirePrawn** · 19/07/2012, 09h45

Bonjour,

La propriété vertical-align ne fonctionne qu'avec des tableaux.
Pour pouvoir l'utiliser sur un élément autre, vous devez préciser dans le css de l'élément qu'il doit se comporter comme un tabeau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
display: table-cell;
vertical-align: middle;

**Schim59** · 19/07/2012, 09h47

Tu mets display block.
Donc faudrait un width:xxxx;margin: auto.
Pour centrer le block en plus du text align: center;.

**patrickbaras** · 19/07/2012, 15h56

ça fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
.stable
{
			border:solid 1px #00FF00;
			display:table;
			width:50%;
			height:50%;
}	
.str
{
			border:solid 1px #0000FF;
			display:table-row;
}	
.std
{
			border:solid 1px #FF0000;
			display:table-cell;
			vertical-align: middle;
			text-align: center;
}	
 
</style>
 
<div class='stable'>
	<div class='str'>
			<div class='std'>A1</div>
			<div class='std'>B1</div>
			<div class='std'>C1</div>
	</div>
	<div class='str'>
			<div class='std'>A2</div>
			<div class='std'>B2</div>
			<div class='std'>C2</div>
	</div>
	<div class='str'>
			<div class='std'>A3</div>
			<div class='std'>B3</div>
			<div class='std'>C3</div>
	</div>
</div>

donne bien :
###########
#A1#B1#C1#
###########
#A2#B2#C2#
###########
#A3#B3#C3#
###########

comme fait-on l'équivalent de colspan et cellspan ?
pour obtenir :
###########
# _____#C1#
# __A1_####
# _____#C2#
###########
#A3#B3#C3#
###########

**Muchos** · 19/07/2012, 16h02

Envoyé par FirePrawn

La propriété vertical-align ne fonctionne qu'avec des tableaux.

C'est principalement utilisé pour ça, mais ça fonctionne sur de nombreux éléments en ligne (texte, image…) : http://www.w3schools.com/cssref/pr_p...ical-align.asp

Maintenant, thomasaurelien devrait expliquer exactement ce qu'il veut aligner : le texte, la div ?…

**Macmillenium** · 19/07/2012, 16h56

Envoyé par FirePrawn

La propriété vertical-align ne fonctionne qu'avec des tableaux.

Elle s'applique aux éléments de rendu table-cell, inline-block et inline remplacés.

Envoyé par patrickbaras

comme fait-on l'équivalent de colspan et cellspan ?

Tu peux aligner deux divs dotées d'un display:inline-block à l'aide de vertical-align:middlePar exemple:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.col,
.row div {
    display:inline-block;                 
}
 
.col {
    vertical-align:middle;
    width:qqch
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div class="col">
    A1
</div>
 
<div class="col">
    <div>C1</div>
    <div>C2</div>
</div>
 
<div class="row">
    <div>A3</div>  
    <div>B3</div> 
    <div>C3</div> 
</div>

alignement vertical texte dans <div>

Positionnement en CSS

Discussions similaires

Partager

Partager