Alignement vertical et horizontal

Bonjour

Ce que j'ai actuellement:

et je voudrais que les deux textes soient également alignés verticalement

            <div class="comment-list>
                <p><span class="left"><h2>Les commentaires</h2></span>
                    <span class="right"><a href="#reply">Laisser une réponse</a></span>
                </p>
            <div>

.left {
	float: left;
}
.right {
	float: right;
}
.comment-list {
            vertical-align: middle;			
}

Merci d'avance
Modifié par cpalo (20 Sep 2013 - 18:15)

salut,
tu as déjà des erreurs HTML. Un élément de type bloc ne peut pas être enfant ni d'un <p>, ni d'un élément de type en ligne. Ton <h2> ne peut donc être ni contenu dans un <span> ni dans un <p>.
Pour ta mise en page, pourquoi passer par des "float" ?

span {display:inline-block;vertical-align:middle}  /* ou top */

bonsoir,

peut-être plus simplement et valide !:

<div id="comments">
  <h2>Commentaires</h2>
  <p class="linkR">
    <a href="#" title="je veux commenter">Laisser un commentaire</a>
  </p>
</div>

#comments {
  line-height:1.6rem;
}
#comments h2 {
  float:left;
  margin:0 
}
p.linkR {
  text-align:right;
}

@gc-nomade> Contraignant ton code non ? On perd l'alignement vertical en "middle" et si ça passait sur deux lignes (même si je suppose qu'il y a peu de chance) ?

Zelalsan a écrit :
@gc-nomade&gt; Contraignant ton code non ? On perd l'alignement vertical en &quot;middle&quot; et si ça passait sur deux lignes (même si je suppose qu'il y a peu de chance) ?

oui, c'est très basique en se basant uniquement sur 1 flottant et deux éléments qui ont des marges par défaut avec des font-size différentes, donc oui , instable effectivement .

Il y a moins contraignant avec du display:table/table-cell, text-align et vertical-align au besoin, faut dire que le p span h2 m'a un peu effrayé, d'ou l'idée de ne pas l'égaré avec du display 'table et le risque d'un faut quiproquo avec les tableaux ...

Bonjour

Autant pour moi... l'histoire du h2 , p et span je le savais!!!
Merci à vous...
j'ai pris la solution de gc-nomade car dans ce cas précis, le titre et le lien seront toujours sur une seule ligne ..( sauf en responsive peut être)

voilà le résultat

Cordialement

Par contre oui j'aurai pu avoir le problème sur deux lignes. Mais là c'était l'alignement avec le logo.



le code html:

<header id="main-header" role="banner">
	
     <a href="http://www.francashautenormandie.fr" target="_blank"><h1 id="logo">Francas de Haute-Normandie</h1></a>		
     <div id="main-title">
	   <h1><a class="maintitle" href="www.francashautenormandie.fr">Les Francas <br />
                  <span class="indent">de Haute-Normandie</span></a></h1>
	    <p>Site de l'Union Régionale </p>
	</div>		 
</header>

et le css:

#main-header{
	position: relative;
	margin-bottom: 18px; 
	height: 15rem;
	background:url(../img/bg-header.jpg) no-repeat; 
}
#logo {
	float:left;
	margin-top:21px;
	margin-left: 0px;
	width:300px;
	height:100px;		
	background:url(../img/logo.gif) no-repeat;
	text-indent:-9999px;
	}	
#logo a {
	display:block;
	width:100%;
	height:100%;
}		
#main-title{
	float:right;
	margin-top:21px;
	width: 430px;
}	
	#main-title h1 {
	font-size: 3.5rem;
	line-height:1;
	margin-bottom: 2.8rem;
	font-style: italic;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;		
}
.maintitle  {			
	color: #C40;
}		
	#main-title p {
	padding-left: 60px;
	color:#004221;
	font-size: 2.1rem; 
	line-height:1;
	font-style: italic;
		}	
.left {
	float: left;
}
.right {
	float: right;
}
.indent {
	padding-left: 20px;
}

Au départ, j'ai essayé de voir comment le logo et le titre pouvait être alignés verticalement.

Cordialement
Modifié par cpalo (21 Sep 2013 - 07:35)

Franchement même pour un alignement sur une ligne y'a pas mieux qu'un simple "display:inline-block" couplé à un "vertical-align". On ne peut pas faire plus simple que ça.

Bonsoir,

@Zelalsan :j'ai essayé mais cela ne marche pas : deux lignes differentes et tous les deux à droite

 <div class="same-align">
         <h2>Les commentaires</h2>
          <p><a href="#reply">Laisser une réponse</a>
          </p>
  </div>

 .same-align {
        display:inline-block;
        vertical-align:middle
    }
.same-align h2 {
        text-align:left;
    }
    .same-align p{
        text-align: right;
    }

Je dois mal saisir le code quelque part...

Cordialement

tu n'as juste pas saisie le fonctionnement des différentes valeur de display

Tu n'as pas besoin de mettre en ligne le parent , juste les deux contenu que tu veut sur la même ligne .

Quelques exemples avec display. http://codepen.io/anon/pen/HixlD
joue avec en tripatouillant le css pour voir les effets et en te servant, par exemple , du W3C pour avoir sous la souris les définitions des règles et valeurs CSS correspondantes.

++

Merci

Je viens de "jouer" avec tes codes. Je reprendrai ça un peu plus tard dans un autre document "vierge" car là j'ai toujours un très léger décalage;
Le lien "laisser un commentaire" est légerement en-dessous de commentaires.

Bon dimanche
Modifié par cpalo (22 Sep 2013 - 06:45)