alinear logo y h1 en header

Derzz · #1 (**permalink**) 17/06/2014, 12:59

Hola estoy creando una web desde cero y mi consulta es si para alinear mi logo+h1 en una sola linea tengo qe usar una hoja de estilo aparte(estoy dando primero pasos en Bootstrap 3); a lo qe me refiero es si tengo qe formatearlo en Inline desde mi css personalida o estoy haciendo algo mal con el Bootstrap

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Mi Primer sitio</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="inicial row">
                <div class="col-md-6">
                    <a href="/" title="Renzo Carlos"><img src="img/logo.png" alt="Renzo Carlos" width="78" height="44"><h1>Renzo Carlos</h1></a>
                </div>
            </div>
        </header>
        <section class="principal">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </div>
 
</body>
</html>

pzin · #2 (**permalink**) 17/06/2014, 13:21

Supongo que lo recomendable es crear tu fichero CSS propio y dejar el de Bootstrap como está; siempre será mejor, por si un día quieres actualizar la versión de Bootstrap por ejemplo.

Para alinear ambos elementos, simplemente tienes que centrar verticalmente la imagen:

Código CSS:

Ver originalbody div.container header a img {
  vertical-align: middle;
}

Derzz · #3 (**permalink**) 17/06/2014, 16:35

Te agradesco, pero lo logre, con un align en la imagen y qitandole el margin al H1.
Gracias de todas maneras.