Foros del Web » Creando para Internet » CSS »

Alineación vertical de textos con CSS

Estas en el tema de Alineación vertical de textos con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/08/2016, 09:16
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 10 meses
Puntos: 3
Alineación vertical de textos con CSS

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.
  #2 (permalink)  
Antiguo 30/08/2016, 14:13
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 10 meses
Puntos: 3
Respuesta: Alineación vertical de textos con CSS

¿Nadie me puede echar un cable?

Gracias.
  #3 (permalink)  
Antiguo 30/08/2016, 15:57
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 4 meses
Puntos: 1826
Respuesta: Alineación vertical de textos con CSS

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.
  #4 (permalink)  
Antiguo 30/08/2016, 22:25
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 10 meses
Puntos: 3
Respuesta: Alineación vertical de textos con CSS

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.
  #5 (permalink)  
Antiguo 31/08/2016, 08:46
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 4 meses
Puntos: 1826
Respuesta: Alineación vertical de textos con CSS

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
  #6 (permalink)  
Antiguo 01/09/2016, 06:22
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 10 meses
Puntos: 3
Respuesta: Alineación vertical de textos con CSS

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.
  #7 (permalink)  
Antiguo 02/09/2016, 01:21
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 4 meses
Puntos: 1826
Respuesta: Alineación vertical de textos con CSS

Revisa si no tienes asignado un padding al contenedor.
  #8 (permalink)  
Antiguo 02/09/2016, 10:01
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 10 meses
Puntos: 3
Respuesta: Alineación vertical de textos con CSS

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.

Última edición por fidelio; 02/09/2016 a las 17:30
  #9 (permalink)  
Antiguo 12/09/2016, 22:28
 
Fecha de Ingreso: agosto-2004
Mensajes: 106
Antigüedad: 19 años, 10 meses
Puntos: 3
Respuesta: Alineación vertical de textos con CSS

¿Alguien por ahí?
  #10 (permalink)  
Antiguo 12/09/2016, 22:57
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 4 meses
Puntos: 1826
Respuesta: Alineación vertical de textos con CSS

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.

Etiquetas: alineacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:33.