Problema para centrar título de post mediante CSS

  • Avatar de Desconocido
    sirdanielweller · Miembro ·

    Hola. Ayer compré la mejora «Custom Design» para personalizar la plantilla Liquorice que utilizo en mi blog. No tenía ni idea de CSS (tampoco de HTML), pero, a fuerza de investigar y hacer pruebas durante horas, me las he apañado para dejar el blog «casi» como quería. Estoy asombrado de lo que he hecho, incluso. Pero me he tropezado con un problema que no consigo resolver. Es este:

    He logrado que los títulos de los posts en la página general (es decir, antes de pincharles y entrar en ellos) queden como me gusta. Pero cuando pincho en alguno con título corto (es decir, que no ocupe más de una línea), me encuentro con que el título se coloca a la izquierda. No encuentro la forma de centrarlo. He probado mil cosas. Supongo que será algún parámetro que hay que cambiar, pero no sé cuál.

    Este es el CSS original en los dos casos:

    #primary-content .post-title {
font-size: 22px;
margin: 0 0 20px;
padding: 0;
text-align: center;
}
#primary-content .post-title a {
background: #0097a5 url(images/title-bg.gif) repeat 0 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
display: inline-block;
font-size: 24px;
font-weight: normal;
line-height: 1.5;
padding: 10px 15px;
text-shadow: -1px -1px #333;
text-transform: uppercase;
}
#primary-content .post-title a:hover {
background: #cc4d22 url(images/title-bg-over.gif) repeat 0 0;
text-decoration: none;
}

#primary-content .single-title,
#primary-content .page-title {
color: #07818c;
font-size: 35px;
line-height: 1.3;
text-align: center;
text-shadow: 2px 2px #FFF;
}

    Y este, el modificado:

    #primary-content .post-title {
font-size:22px;
text-align:center;
text-shadow:none;
margin:0 0 20px;
padding:0;
}

#primary-content .post-title a {
background:#ff5c26 url('images/title-bg.gif') repeat 0 0;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
color:#fff;
display:inline-block;
font-size:24px;
font-weight:normal;
line-height:1.5;
text-shadow:none;
text-transform:uppercase;
margin:0 0 20px;
padding:10px 15px;
}

#primary-content .post-title a:hover {
background:#ff5c26;
text-shadow:none;
}

#primary-content .single-title {
text-align:center;
background:#ff5c26 url('images/title-bg.gif') repeat 0 0;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
color:#fff;
display:inline-block;
font-size:24px;
font-weight:normal;
line-height:1.5;
text-shadow:none;
text-transform:uppercase;
margin:0 0 20px;
padding:10px 15px;
}

#primary-content .page-title {
color:transparent;
font-size:35px;
line-height:1.3;
text-align:center;
text-shadow:none;
}

    Pues hasta aquí he llegado. No consigo resolver el enigma.
    Sé que es un detalle de poca importancia, pero me desepera no poder hacer ese «último retoque» para dejar el blog como me gusta.
    Si alguien sabe qué puedo hacer para solucionarlo, por favor, que me lo diga. Gracias.

    El blog con el que necesito ayuda es (visible solo para usuarios conectados).

  • Avatar de Desconocido
    airodyssey · Moderador ·

    Hola. Fui a tu blog con Firefox y el título de la entrada está centrado en mi pantalla, incluso cuando consulto la entrada individualmente:
    http://unpickwickianoenblandings.wordpress.com/2011/09/08/mi-planta-de-naranja-lima-jose-mauro-de-vasconcelos/
    ¿Problema resuelto… o diferencia de navegador? Por favor confirma. Gracias.

  • Avatar de Desconocido
    sirdanielweller · Miembro ·

    Hola. La entrada que citas no era un buen ejemplo porque las que me daban problemas eran las de título corto, así que no estoy seguro de si has entrado antes o después de que solucionase el asunto. El caso es que hace un rato me he puesto otra vez a darle vueltas al asunto y he logrado lo que quería añadiendo esto al CSS: 

    .post-wrapper {
        text-align:center;
	background: url("images/border.gif") repeat-x left bottom;
	margin: 0 0 50px;
	padding: 0 0 20px;
}

.entry {
        text-align:left;
        overflow:hidden;
}

.post-meta {
	text-align:left;
        font-size: 14px;
	margin: 20px 0;
}

    De esta forma, he logrado que se centrase el título de las entrada incluso en la vista individual, aunque, como ves en la cita, he tenido que ajustar otras cosas a la izquierda porque se me había centrado todo. No he puesto «Problema resuelto» porque tenía pensado poner aquí lo que he hecho para ver si algún experto me podía decir si era un apaño muy malo y me aconsejaba algo mejor. De todas formas, he peleado tanto para conseguirlo, que no creo que toque ya nada más aunque me aconsejen otra solución. Ya veremos.
    Gracias por responder.

  • Avatar de Desconocido
    airodyssey · Moderador ·

    ¿O sea no cambias nada por ahora? De acuerdo. Si tienes otra duda, estamos aquí. Saludos.

  • Avatar de Desconocido
    sirdanielweller · Miembro ·

    Como acabé resolviendo el problema de cualquier manera por mi cuenta, podéis borrar ya este tema. No creo que aporte nada. Gracias.

  • Avatar de Desconocido
    airodyssey · Moderador ·

    Aquí solo borramos temas si hay abuso, no porque ya están «resueltos».

    Por esta vez, lo he puesto en la sección Fuera de tema para que sea menos visible.

  • El debate ‘Problema para centrar título de post mediante CSS’ está cerrado y no admite más respuestas.