un div Centrer dans un div sur le contenu (upvotes facile)

Question

J'ai fait le violon suivant:

http://jsfiddle.net/hxQE4/

Voyez comment la flèche droite pousse l'image vers le bas. Je voudrais que la flèche droite soit centrée dans la grande div indépendamment de la taille de l'image à l'intérieur de celle-ci. Je ne peux pas utiliser le positionnement absolu, mais j'aimerais que la flèche soit centrée par rapport à la div (environ 300px depuis le début de la div), quelle que soit l'image à l'intérieur.

Answer 1

Une solution rapide et sale serait de régler la portée du bouton (.slider-right) à une hauteur de 100%, puis d'appliquer une "position: relative, top: 50%;" au bouton (.slider-right .circle). Cela mettra le haut du bouton à mi-chemin, donc vous devrez peut-être l'ajuster un peu à 48% ou ce qui vous semble le mieux.

Vous devrez également supprimer la marge supérieure de la plage contenant si vous avez suivi cette route ou que le bouton sera réduit d'autant.

J'ai également remarqué que vous avez div à l'intérieur de span. Vous devriez éviter de placer des éléments de niveau bloc (comme les divs) dans les éléments de niveau en ligne (comme span). Il échouerait probablement la validation telle qu'elle est.


MISE À JOUR Le css:

.slider-right { 
position: relative; 
float: right; 
height: 100%; 
margin-top: 0px; 
position: relative; 
right: 6px; 
width: 32px; 
z-index: 30; 
} 

.circle{ 
position: relative; 
top: 48%; 
display:table; 
line-height:30px; 
width:10px; 
height:10px; 
padding:3px 5px 3px 7px; 
border:2px solid #CFC5CD; 
border-radius:21px; 
background: #000000; /* Old browsers */ 
opacity: .99; 
}