Discussion :

[soeursourire]

Bonjour,

Je ne comprends pas pourquoi ce code suivant ne marche pas (j'ai une image de flèche svg que je veux centrer dans son conteneur (un rectangle de fond de couleur placé sur un carousel)):

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
.owl-prev,
.owl-next {
	position: absolute;
	top: 80%;
	width: 68px;
	height: 104px;
	text-align: center;
	margin-top: -52px; // Half of the prev/next buttons height here in negatives to center them perfectly
	background-color: $color8;
}
 
.owl-prev {
	left: 0;
 
	img {
		display: inline-block;
		width: 53px;
		height: 66px;
		margin: auto;
	}
}

Je suis obligée de mettre margin-top: 17px; pour que ca marche. Pourquoi est-ce que ce margin: auto; (pour centrer verticalement) ne marche pas dans ce cas?
Merci pour votre aide

[mathieu]

regardez ce message, il pourra peut-être vous aider :
http://www.developpez.net/forums/d15...c/#post8462880

[Azerx]

D'après W3C:

Code :

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

1
2
3
4
5
.image{
    display: block;
    margin-left: auto;
    margin-right: auto
}

Source

[NoSmoking]

Bonjour,

...margin: auto; (pour centrer verticalement) ne marche...

cela n'a d'ailleurs jamais marché pour le centrage vertical.
Tu peux essayer un line-height ou une des solutions avancées dans la discussion proposée par mathieu.