Alineación vertical de textos con CSS

[fidelio]

Hola,

A ver si alguien me puede echar un cable, ya que llevo un buen rato intentando alinear unas líneas de texto.

http://www.primeratoma.com.es

Como se puede ver, hay títulos que ocupan sólo 1 linea de texto y otros que ocupan 2. Mi idea es que los títulos queden centrados verticalmente en el bloque que hay como negro semitransparente de detrás, ocupen 1 o 2 líneas.

He probado con las opciones de "display" y nada. He probado dando márgenes y tampoco. He probado con los padding, y tampoco.

A ver si a alguien se le ocurre otra idea, por favor. Si necesitáis que ponga algo más de información, me decís.

Muchas gracias de antemano.

[fidelio]

¿Nadie me puede echar un cable?

Gracias.

[Rafael]

Perdón, pero como que no funciona que pongas un link de la página completa a ver si la gente entiene que necesitas.

Separa y aisla el pedazo de código que te está causando problemas.

[fidelio]

Ok. Pensaba que la gente lo podía ver con el inspeccionador de objetos del navegador. Perdonad.

Éste es el php

Código PHP:

  <?php
// Get theme Options
$max_slider_posts = cs_getoption('theme_slidermax');
 
get_header(); ?>
    
    <?php if(ts_getoption('ts_show_slider') == 1): ?>
    
    <div id="slider-container">
 
        <div id="slider-window">
            
            <div id="slider">
            
                <?php get_slider_posts($max_slider_posts); ?>
            
            </div>
 
            <div class="clearer"></div>
                
        </div>
        
        <div class="nivo-controlNav">
            <?php get_slider_thumbnails($max_slider_posts); ?>
        </div>
            
    </div>
 
    <div class="clearer"></div>
    
    <?php endif; ?>
 
    <div id="main" class="containerblock">
        
        <div id="content">
            <?php if (have_posts()) : $postcount = 0;
                    while (have_posts()) : the_post(); ?>                
                        <div <?php post_class('archive'); ?> id="post-<?php the_ID(); ?>">
                            
                            <div class="preview_image">
 
                        <div class="preview_data">
                                <?php $category = get_the_category(); ?>
                                    <div class="post-categories"><a href="<?php echo get_category_link($category[0]->cat_ID); ?>"><?php echo $category[0]->cat_name; ?></a></div>
                                    <div class="archive_title"><a href="<?php the_permalink(); ?>"><?php echo titulo_corto('...', 80);; ?></a><span class="nota_index"><?php echo get_post_meta($post->ID,'NOTA',true); ?></span></div></p>            
                                </div>
                                
                                <a href="<?php the_permalink(); ?>">
                                <?php echo get_preview_thumbnail(); ?>
                                </a> 
                                
                            </div>
                            
                            <div class="preview_text">
                        
                                <br/>
                            <?php echo get_post_meta($post->ID,'TITULAR',true); ?>.                            
                        </div>                                                    
                            <div class="clearer"></div>
                            
                        </div>                
                
                    <?
        
                    endwhile; ?>
                    
                    <div class="clearer"></div>
                                        
                    <div id="navigation">
                        </p>
                        <center><?php wp_pagenavi(); ?></center>
                        </p>
                        <div class="clearer"></div>
                    </div>
                    
            <?php else : ?>
        
                <div class="post">                    
                    <div class="entry">
                        <h2 class="title"><?php echo $notfound_title; ?></h2>
                        <p><?php echo $notfound_text ?></p>
                    </div>
                </div>
        
            <?php endif; ?>
                
        </div>
        
        <?php get_sidebar(); ?>
        
        <div class="clearer"></div>
 
    </div>
    
    <?php get_footer(); ?>   

Y éstos los CSS:

Código:

.preview_image {
    display: block;
    position: relative;
    width: 300px;
    height: 150px;
}
.preview_data {
    text-transform: uppercase;
    font-family: 'Francois One', sans-serif;
    font-size: 9px;
    word-spacing: -1px;
    letter-spacing: 1px;
    display: block;
    width: 290px;
    max-height: 140px;
    overflow: hidden;
    background-image: url('../images/post_title_bg2.png');
    padding: 121px 5px 2px 5px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.archive_title {
    text-align: left;
    font-family: 'Francois One', sans-serif;
    word-spacing: -2px;
    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
    height: 33px;
    width: 291px;
}
.archive .post-categories {
    float: right;
    margin: -121px -5px 0px 0px;
}
.nota_index {
    font-style: normal;
    font-size: 14.5px;
    letter-spacing: 0px;
    color: #ffbb00;
    margin-left: 4px;
    vertical-align: 1px;

Muchas gracias.

[Rafael]

Hum... Está peor lo del php nos espanta más.

Te ayudo. Acá hay una imagen. Por fin entendí qa que te referías.



No he revisado el codigo Css, pero básicamente 1) yo definiría el alto vertical de la barra transparente (lo cual supongo que ya está).

y 2) Le metía un flexbox con alineación vertical: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Saludos

[fidelio]

Muchas gracias, lo primero.

He seguido tus recomendaciones, dándole a la barra una altura y utilizando el "display:flex;", pero el resultado es prácticamente el mismo.

El problema que me parece ver, es que el bloque que tiene arriba (donde pone "CRITICAS") me impide subir más el texto del título.

Gracias.

[Rafael]

Revisa si no tienes asignado un padding al contenedor.

[fidelio]

Hola de nuevo:

Pues casi lo tengo y está casi solucionado, pero ahora me ha salido un problema nuevo. Al lado de los títulos hay un bloque con otro class (estrellas) y no me lo coloca seguido del título. Sólo cuando es 1 línea, si son 2, lo deja a la derecha del todo. Es como si todas las propiedades del flex las aplicase sólo al div del título. Es más, si en php muevo el </a> después del class de "nota_index", entonces si los alinea, pero claro, me interpreta las estrellas como si pertenecieran al enlace. (Lo he dejado así para que veas a qué me refiero)

Aquí están los nuevos CSS

Código:

.preview_image {
    display: block;
    position: relative;
    width: 300px;
    height: 150px;
}
.preview_data {
    text-transform: uppercase;
    font-family: 'Francois One', sans-serif;
    font-size: 9px; 
    word-spacing: -1px;
    letter-spacing: 1px;
    display: block; 
    width: 300px;
    height: auto;
    overflow: hidden;
    background-image: url('../images/post_title_bg2.png');
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.archive_title {
    text-align: left;
    font-family: 'Francois One', sans-serif;
    word-spacing: -2px;
    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
    height: 217px;
    width: 293px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    align-content: left;
    margin-left: 4px;
    flex-wrap: nowrap;
}
.archive .post-categories {
    float: left;
    margin: 0px 0px 0px 0p
}
.nota_index {
    font-style: normal;
    font-size: 14.5px;
    letter-spacing: 0px;
    color: #ffbb00;
    margin-left: 4px;
    margin-left: 4px;
    vertical-align: 1px;

El php no ha cambiado nada.

Muchas gracias y un saludo.

[fidelio]

¿Alguien por ahí?

[Rafael]

La realidad es que no lo he revisado a fondo.

El flex toma todos los elementos de bloque. Revisa si no necesitas un div adicional o al contrario, quitar algún div.