28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer verticalement deux éléments de type bloc

Bonsoir,

Non, s'il vous plaît ne criez pas, je sais, ce sujet a été maintes fois abordé Smiley langue .
Pour en venir aux faits, voici mon bout de code :

#newLectureForm
{
	display: block;
}

#newLectureCol1
{
	float: left;
	width: 33%;
}

#newLectureCol1 input
{
	width: 74px;
}

#newLectureCol1 label
{
	display: inline-block;
	width: 82px;
	text-align: right;
}

#newLectureButtonDiv
{
	float: left;
	width: 20%;
	margin: 0 auto;
}


<form id="newLectureForm" name="newLectureForm" method="post" style="width:84%">

		<div id="newLectureCol1">
			<div>
				<label for="lectureDateTextBox">Date:</label>
				<input type="text" id="lectureDateTextBox" name="lectureDateTextBox" placeholder="yyyy-mm-dd" />
				<span class="redTxt"></span>
			</div>
			<div>
				<label for="lectureStartingTimeTextBox">Starting time:</label> 
				<input type="text" id="lectureStartingTimeTextBox" name="lectureStartingTimeTextBox" placeholder="00:00" />
				<span class="redTxt"></span>
			</div>
			<div>	
				<label for="lectureEndingTimeTextBox">Ending time:</label>
				<input type="text" id="lectureEndingTimeTextBox" name="lectureEndingTimeTextBox" placeholder="00:00" />
				<span class="redTxt"></span>
			</div>
		</div>

	
		<div id="newLectureButtonDiv">
			<input type="button" id="newLectureButton" name="newLectureButton" value="Add the lecture" onclick="" />
		</div>


	</form>


Mon problème : je n'arrive pas à centrer le bouton newLectureButton verticalement.


Merci d'avance Smiley cligne ,

Romain
Modifié par rom117 (20 Sep 2011 - 11:35)
Bonjour,

À vrai dire j'ai déjà lu l'article. J'avais essayé d'appliquer la partie Centrer verticalement des blocs dans un conteneur de hauteur fluide à mon exemple (utilisation du vertical-align) . Sans succès...

Et dans l'exemple que j'ai posté j'ai essayé de mettre des margin à 0. Sans succès non plus.

Je suis pourtant persuadé que la solution est dans une de ces deux méthodes, je dois sans doute mal l'appliquer... Smiley decu

Romain
Alors j'ai repris le lien, copié EXACTEMENT l'exemple et remplacé le texte par le mien (et rajouté mon css).
Au final, miracle, ça marche ! Smiley biggrin
Je ne m'y prenais donc pas comme il fallait. Toutes mes excuses Smiley cligne .
J'ai quand même du mal à comprendre pourquoi il faut tous ces conteneurs et conteneurs de conteneurs... Enfin, ça marche, alors on va pas s'en plaindre !

Merci mille fois jmlapam,

Romain


PS : Pour ceux que ça intéresse, voici mon code :


body
{
	background: grey;
}

div.conteneur 
{ 
	text-align:center; /* centrage horizontal */ 
	border:1px solid blue;
}

div.bloc 
{ 
	margin:0 10px; /* espacement horizontal des blocs */
	border:1px solid blue;
	display:inline-block;
	vertical-align:middle;
	text-align:left; /* on rétablit l'alignement du texte */ 
}

#newLectureCol1
{
	float: left;
	width: 170px;
}

#newLectureCol1 input
{
	width: 74px;
}

#newLectureCol1 label
{
	display: inline-block;
	width: 84px;
	text-align: right;
}

#newLectureButtonDiv
{
	float: left;
}




<body>
 
	<div class="conteneur">

		<div class="bloc">
			<div id="newLectureCol1">
				<div>
					<label for="lectureDateTextBox">Date:</label>
					<input type="text" id="lectureDateTextBox" name="lectureDateTextBox" placeholder="yyyy-mm-dd" />
					<span class="redTxt"></span>
				</div>
				<div>
					<label for="lectureStartingTimeTextBox">Starting time:</label> 
					<input type="text" id="lectureStartingTimeTextBox" name="lectureStartingTimeTextBox" placeholder="00:00" />
					<span class="redTxt"></span>
				</div>
				<div>	
					<label for="lectureEndingTimeTextBox">Ending time:</label>
					<input type="text" id="lectureEndingTimeTextBox" name="lectureEndingTimeTextBox" placeholder="00:00" />
					<span class="redTxt"></span>
				</div>
			</div>
		</div>

	
		<div class="bloc">
			<div id="newLectureButtonDiv">
				<input type="button" id="newLectureButton" name="newLectureButton" value="Add the lecture" onclick="" />
			</div>
		</div>
	
	</div>

</body>

Modifié par rom117 (20 Sep 2011 - 11:33)
PS2 : À noter qu'avec cet exemple les float ne marchent plus pour aligner à droite ou à gauche. Il faut utiliser text-align (en fixant une largeur pour le bloc conteneur).
Modifié par rom117 (20 Sep 2011 - 11:37)
Sujet clos
Aller à