salto - Encabezado HTML con imagen y texto: ¿Alinear texto hacia abajo?

poner texto al lado de una imagen html

Question

Estoy escribiendo una página HTML con CSS. En la parte superior de la página, quiero mostrar un encabezado con una imagen y texto (imagen a la izquierda del texto). El tamaño de la imagen es de 64 x 64 píxeles y quiero que el texto sea grande.

Pude hacer casi todo, excepto que quiero alinear el texto en la parte inferior, pero, sin importar lo que haga, parece que no consigo que el texto deje de colocarse en la parte superior.

Aquí está el HTML para mi encabezado:

<div id="container" class="container">
    <div class="header">
        <div class="header image"></div>
        <div class="header text">Header Text</div>
    </div>
</div>

y aquí está el CSS;

.container .header {
    height: 65px;
    border:2px solid red;
}

.container .header .image {
    background: url("../images/icon64.png") no-repeat;
    float: left;
    display: inline-block;
    width: 65px;
    border:2px solid green;
}

.container .header .text {
    float: left;
    display: inline-block;
    vertical-align: bottom;
    font-family: sans-serif;
    font-size: x-large;
    border:2px solid blue;
}

He estado leyendo varias páginas web después de buscar cómo hacerlo. Encontré una página que parecía bastante directa. Dijeron que debe usar el bloque en línea para la propiedad de visualización para que se respete la alineación vertical .

Cambié mi CSS a lo que ves arriba, pero aún así no funcionó. Así es como se ve mi encabezado:

(Tenga en cuenta que el color del borde es solo para visualizar lo que está sucediendo).

¿Alguien puede decirme qué estoy haciendo mal y cómo solucionarlo para que mi texto se alinee verticalmente en la parte inferior?

Gracias.

Answer 1

Eso es correcto, establece elementos como bloques en línea y usa vertical-align. Sin embargo, eso significa no flotar los elementos! Los elementos flotantes son flotantes y usted niega la display: inline-block declaración de display: inline-block : http://jsfiddle.net/qQtG9/2/ (he limpiado su código).

HTML:

<div class="header">
    <div class="image"></div><div class="text">Header Text</div>
</div>

CSS:

.header {
    border:2px solid red;
}

.header .image {
    background: url("http://placehold.it/64x64") 
                no-repeat;
    width: 65px;
    height: 65px;
    border:2px solid green;
}

.header .text {
    font: x-large sans-serif;
    border:2px solid blue;
}

.header .image, 
.header .text {
    display: inline-block;
    vertical-align: bottom;
}

Answer 2

También puedes intentar darle a #header una posición: relativa y luego dar a la posición .text absoluta, así que si le das a bottom: 0; se apilará en la parte inferior de la div #header