28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical de texte dans un div relatif

Bonsoir à tous ! Je suis bloqué dans cette magnifique spirale qu'est le vertical-align.

Voici une capture d'écran de la page telle qu'elle est maintenant :
http://i.pachattiere.net/2014-11-16_19-29-20.png

Il y a trois sections : texte, choix1 et choix2. Le but est simple, centrer le texte dans chacune de ces sections !

Bien entendu, j'ai fait mes recherches avant. Mais si j'ai atterri ici, c'est que cela a été infructueux.

Voici la template HTML : 
<!DOCTYPE html>
<html>
    <head>
		<link rel="stylesheet" href="style2.css" type="text/css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Un site cool</title> 
    </head>
    <body>
		<section id="texte">
			<p>Bonjour ! Je suis Bob Lennon !<br />Vous m'avez certainement vu dans des films. Ou pas. Mais on s'en fout,
			mon film préféré, c'est American Pie. Oui je sais c'est nul, je vais mourir pour la peine, au revoir, j'étais
			Bob Lennon</p>
		</section>
		<section id="choix1">
			<p><a href="#">Non meurs pas, ce serait dommage</a></p>
		</section>
		<section id="choix2">
			<p><a href="#">Meurs, skyrim c'est pourri de toutes façons</a></p>
		</section>
	</body>
</html>


Et le CSS relié :
html {
  height: 100%;
  margin:0px;
}

body {
	font-family: Arial;
	height: 100%;
	margin: 0;
	padding: 0;
}

#texte {
	display: inline-block;
	width: 100%;
	min-height: 90%;
	height : 90%;
	background-color: #8ACDFF;
}

#choix1 {
	display: inline-block;
	width: 50%;
	height: 10%;
	float: left;
	border: 0px;
	background-color: #B276FF;
}

#choix2 {
	display: inline-block;
	width: 50%;
	height: 10%;
	float: right;
	border: 0px;
	background-color: #76FFB6;
}

p{
	vertical-align:middle;
	text-align:center;
}


Rien n'y fait, rien ne bouge. Je ne pense pas demander le diable pourtant, pouvez-vous m'aider ? Ca me sauverait, merci ! Smiley biggrin
Bon, mon problème ne pouvait être résolu par le CSS seul, j'ai du avoir recours au JQuery.

<script>
$(function() {
    $('.valignmiddle').each(function() {
        $(this).parent().css('position', 'relative');
        $(this).css('position', 'absolute');
        $(this).css('top', '50%');
        $(this).css('left', '0px');
        $(this).css('width', '100%');
    });
    $(window).resize(function() {
        var thisheight = Math.round(parseInt($('.valignmiddle').outerHeight()) / 2);
        $('.valignmiddle').css('margin-top', '-' + thisheight + 'px');
        if(parseInt($('.valignmiddle').outerHeight()) > parseInt($('.valignmiddle').parent().outerHeight())) {
        
            $('.valignmiddle').parent().outerHeight($('.valignmiddle').outerHeight());
        
        }
    }).trigger('resize');
});
</script>


Il suffit de faire prendre la classe valignmiddle aux balises p, et roulez jeunesse.
Modérateur
Bonsoir, bien entendu que cela peut être résolu en CSS sans ces bricolages javascriptiens. Il faut néanmoins comprendre que vertical-align ne gère pas l'alignement vertical dans le bloc mais sur la ligne de texte, excepté pour les éléments de type cellule de tableau.

La première solution, la plus simple, est donc d'utiliser des display: table-cell, display: table etc. Cependant cela demanderait d'ajouter un niveau de balisage.

Sinon la méthode plus ancienne mais toujours valide: jouer sur la hauteur de la ligne de texte comme expliqué remarquablement dans cet article:
http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html
Mais dans ce cas comment le mettre en place ici ? J'y ai passé tout mon après-midi, je dois bien avouer en avoir marre, car je vois pas du tout comment appliquer ce display ici.

+ Le sujet n'est même pas résolu, vu qu'en JS il y a des décalages..
Sujet clos
Aller à