Esto se produce debido a que las etiquetas h1 tienen por defecto la propiedad display: block
y esto hace que actúen como bloques y que el texto se baje justo debajo de la imagen.
Sin embargo, puedes hacer que los elementos actúen como elementos inline
(que se sitúen en la misma línea) pero teniendo las propiedades de los bloques (pueden tener altura, anchura...). Esto se consigue mediante la propiedad display: inline-block
. De esta manera, el texto se situará a la derecha de la imagen ya que se posicionará en la misma línea que esta.
Por último, podrías utilizar la propiedad vertical-align: middle
sobre la imagen para que la imagen y el texto se alineen de forma vertical.
Si además quieres centrar el texto horizontalmente en el espacio que queda deberás de ponerle una anchura al header y en el texto hacer uso de la propiedad text-align: center;
y de la propiedad calc
para la anchura, la cual te permite hacer cálculos del espacio que queda, en este caso le he restado a la anchura total del header, la anchura de la imagen + los bordes + el padding, tanto de la cabecera como de la imagen.
* {
margin: 0px;
padding: 0px;
}
#cabecera {
background: #FFFBB9;
border: 2px solid #0a3fee;
padding: 10px;
}
.logo{
width: 200px;
height: 200px;
border: 2px solid #ee930a;
margin: none;
vertical-align: middle;
}
#titulo{
display: inline-block;
text-align: center;
width: calc(100% - 228px);
}
<div id="agrupar">
<header id="cabecera">
<img class="logo" src="LOGO.png">
<h1 id="titulo"> titulo de mi pagina</h1>
</header>
</div>