Alinear verticalmente dos trozos de texto con diferentes tamaños de fuente usando CSS

Question

En la parte superior de la página quiero que el título de la página esté alineado a la izquierda de la pantalla con un menú de navegación corto alineado a la derecha de la pantalla . Puedo lograr esto usando float pero los dos elementos tienen diferentes baslines, es decir, la línea de base del texto parece diferente. ¿Hay alguna manera de hacer que esto funcione usando css? Tengo una muestra de lo que estoy tratando de hacer arriba en jsFiddle http://jsfiddle.net/nBPCG/63/

Answer 1

Hola se puede utilizar display: inline-block en su h1

o vea el Fiddle: - http://jsfiddle.net/nBPCG/101/

Answer 2

En primer lugar me gustaría sugerir el uso de un ul para envolver los enlaces en lugar de un h3, esa estructura no tiene sentido. Luego solo agregaría algo de relleno al ul. Aquí hay una limpiado ejemplo del marcado:

<article > 
<header> 
    <h1>This is Title</h1> 
    <nav> 
     <ul> 
      <li><a href="">Home</a></li> 
      <li><a href="">Works</a></li> 
      <li><a href="">Blog</a></li> 
      <li><a href="">Contact</a></li> 
     </ul> 
    </nav> 
    <div class="clr"></div> 
</header> 
</article> 

Y los estilos:

body { 
    font-family:"Verdana", Verdana, sans-serif; 
    font-size: 1em; 
    font-weight:400; 
} 

h1 { 
    font-family:"Century Gothic", Verdana, sans-serif; 
    font-size: 4em; 
    font-weight:400; 
    float: left; 
    margin-left:10px; 
} 

header nav { 
    margin-right: 10px; 
    float: right; 
} 

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 2em 0 0 0; 
} 

nav ul li { 
    display: inline; 
    font-size: 1.2em; 
    font-weight:400; 
} 

nav a { 
    padding: 0 1em; 
    border-right: 1px solid #000; 
} 

nav li:last-child a { 
    padding-right: 0; 
    border-right: none; 
} 

.clr {clear:both;} 

violín: http://jsfiddle.net/nBPCG/98/