Imagen del logotipo y encabezado H1 en la misma línea

Question

Quiero crear mi primera página web pero encontré un problema.

Tengo el siguiente código:

<img src="img/logo.png" alt="logo" /> 
<h1>My website name</h1> 

Quiero saber cómo hacer que el logotipo y la H1 a estar en la misma línea. Gracias!

Answer 1

Como ejemplo (DEMO):

HTML:

<div class="header"> 
    <img src="img/logo.png" alt="logo" /> 
    <h1>My website name</h1> 
</div> 

CSS:

.header img { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: #555; 
} 

.header h1 { 
    position: relative; 
    top: 18px; 
    left: 10px; 
} 

DEMO

Answer 2

en su archivo css hacer img { float: left; } y h1 {float: left; }

Answer 3

Prueba esto:

<img style="display: inline;" src="img/logo.png" alt="logo" /> 
<h1 style="display: inline;">My website name</h1> 

Answer 4

Prueba esto:

1. poner los dos elementos en un DIV contenedor.
2. Dale ese contenedor del desbordamiento de la propiedad: auto
3. flotador ambos elementos a la izquierda utilizando float: left
4. Dale H1 un ancho de modo que no ocupa todo el ancho de su contenedor principal.

Answer 5

Si la imagen es parte del logotipo por qué no hacer esto:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1> 

uso de CSS Para el peinado mejor.

Y también es una buena práctica hacer que su logotipo sea un hipervínculo que lleve al usuario a la página de inicio.

Por lo que podría hacer:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1> 

Answer 6

Puede hacerlo como Billy Foso te dijo, envuelva su <img> y <h1> en un <div> y utilizar float: left; flotar su imagen a la izquierda, ajuste el <div>width y de establecer un line-height para su h1 y utilizar <div style="clear: float;"></div> para borrar tus elementos flotantes

Fiddle

Answer 7

sólo se adhieren la etiqueta IMG dentro de la etiqueta h1 como parte del contenido.

Answer 8

Mira esto.

.header{width:100%; 
    } 

    .header img{ width: 20%; //or whatever width you like to have 

    } 

    .header h1{ 

    display:inline; //It will take rest of space which left by logo. 
} 

Answer 9

que haría uso de arranque y ajuste el HTML como:

<div class="row"> 
    <div class="col-md-4"> 
     <img src="img/logo.png" alt="logo" /> 
    </div> 
    <div class="col-md-8"> 
     <h1>My website name</h1> 
    </div> 
</div>