centrage horizontal et vertical de 2 boite en ligne: http://www.siteduzero.com/forum/sujet/alignement-vertical-firefox-chrome

dabblet.css

/* centrage horizontal et vertical  de 2 boite en ligne:  http://www.siteduzero.com/forum/sujet/alignement-vertical-firefox-chrome*/
/* Voici quelques techniques classique .
DISPLAY:FLEX ; : solution ideal , n'est pas abordé voir: http://www.w3.org/TR/css3-flexbox/ */
/* 1) passons nos element en boites en lignes et eliminons les marges par défaut*/
header h1, header p {display:inline-block; margin:0;}
/* 2) distribuer les elements equitablement sur une ligne.
  Quelques pistes et idées:
		a) piste : text-align :possibilités : left,center,right et justify.  
		b) classique: flux & float.
		c) display : inline-block, table, table-cell.
*/
/* hauteur , bordure et fond du conteneur */
header {height: 80px;border:1px solid;background:turquoise;}
/* 3) le centrage vertical 
	Quelques pistes
		aa) line-height : si contenu sur une seule ligne
		bb) vertical-align : au sein d'une cellule de table ou de sa valeur display.
		cc) vertical-align : entre element de type inline ou de boite inline.
		dd) position : absolute et relative. A utiliser precautioneusement
*/
/* 4) distribuons et organisons nos idées : */
/* 	Visualisons les classes appliquées aux elements pour nos tests : */
	header {margin:2em;position:relative;}
	header:before {content :'class="' attr(class)'"';position:absolute;top:-1.3em;left:0;background:yellow;padding:0 0.25em;line-height:1em;}
	h1:before, p:before {content:attr(class);background:yellow;}
	:before {border:red dotted 1px;}
	
/* piste a */	
/* pour rappel :) */.left {text-align:left;}.center {text-align:center}	.right {text-align:right;}

.justify {text-align:justify;} /* celui-ci ne s'applique pas sur une ligne unique et sur la derniere */
		
		/* Forçons via CSS le contenu sur 2 lignes */
			/* injectons une ligne supplementaire via une boite en ligne virtuelle */
			.justify:after {content:'';display:inline-block;width:95%;height:0;}
			/* reinjection une boite en ligne devant pour avoir 3 elements à répartir */
			header.justify:before {position:static;display:inline-block;/* content:' ';*/} 
	
/* piste b  */
.b h1 {float:left;width:90%; margin-right:-10%;}
/* piste c  */
.c {display:table; width:96%; }
.c h1, .c p {display:table-cell;width:100%}	
/*  piste aa  */
.aa {line-height:80px;}
/* piste bb et cc */
.bb, .cc {vertical-align:middle;}
/* piste dd */
.dd {position:absolute;right:0;}

dabblet.html

<p>text-align</p>
<header class="a left"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a center"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a right"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a justify + astuce"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>text-align et line-height</p>
<header class="a aa left"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a aa center"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a aa right"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a aa justify + astuce"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>text-align et vertical-align</p>
<header class="a bb left"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a bb center"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a bb right"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<header class="a bb justify + astuce"> 	<h1>titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>float et flux </p>
<header class="b right"> 	<h1 class="center">titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>float et flux  et line-height</p>
<header class="aa b right"> 	<h1 class="center">titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>float et flux  et vertical-align</p>
<header class="bb b right"> 	<h1 class="center">titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>display </p>
<header class="c right"> 	<h1 class="center">titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
</hr>
<p>display et line-height </p>
<header class="aa c right"> 	<h1 class="center">titre de longueur variable </h1> 	<p><img src="http://lorempixel.com/100/30/" /></p> </header>
</hr>
<p>display et vertical-align </p>
<header class=" c right"> 	<h1 class="center cc">titre de longueur variable </h1> 	<p class="cc" ><img src="http://lorempixel.com/100/30/" /></p> </header>
<hr/>
<p>position absolute, text-align et line-height </p>
<header class="aa center"> 	<h1 >titre de longueur variable </h1> 	<p class="dd" ><img src="http://lorempixel.com/100/30/" class="bb" /></p> </header>
<hr/>
<p>Et on peut continuer à associer ou distribuer des règles communes ou pour chaque élèment selon ses connaissance et le contexte.</p>
<p>L'important est d'avoir une vision globale des possibilités en faisant l'inventaire de ce que l'on connait 
pour se faire mentalement une ou plusieurs trames coherentes,au lieu de tatonner au hasard.</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}