Div flotante con li flotante, ¿cómo centro el texto en el LI?

Tengo que implementar el siguiente ejemplo de diseño, por simple que parezca, en HTML/CSS, pero parece que no puedo hacer que el texto con las dos tuberías se alinee al centro de la página. Línea Izquierda, Texto y Línea Derecha en una posición centrada con texto casi en el medio de las líneas

Aquí está el código CSS que tengo actualmente:

#nav {
float: right;
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif;
font-size: 6.5em;
margin: 0px 0 10px;
/****************IE6****************/
padding-top: 0em;
}
#nav ul {
    padding: 0 0 0 20px;
    position: relative;
}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
}
ul, ol {
    list-style: none outside none;
}
#nav ul li {
    float: left;
    margin: 0 0 0 20px;
    position: relative;
    padding-right: 20px;
    background:url(pipe.png) no-repeat 100% 50%;
}
#nav ul li:last-child
{
    background: none;
}
#nav li  {
    color: #666666;
    text-decoration: none;
    padding-right: 5px;
}


/*End hide*/
/*Mac IE 5*/
* html #nav li:first-child { border-left: 0; }

Y este es mi HTML

<div id="nav">
    <ul>
        <li>
            &nbsp;
        </li>
        <li> 
            LYNXX
        </li>
        <li>
        &nbsp;
        </li>
    </ul>
</div>

He probado lo siguiente:

  1. Agregar un div externo y alinear ese centro, eso no hizo nada al div interno
  2. Intenté usar tres div en su lugar y flotar a la izquierda, pero aún no pude alinear el texto en el medio de las "tuberías"/líneas

He intentado muchas más, pero después de las 5 horas que ya le he dedicado, no recuerdo qué hice y qué dejé de hacer.

Debería ser IE 7,8,9 y todos los demás navegadores más recientes listos.

Si alguien me puede ayudar con esto le estaré MUY agradecido.

gracias anina

preguntado el 03 de mayo de 12 a las 17:05

¿Por qué usar flotador? Cree un contenedor div, coloque dentro de él otros tres divs y juegue con position: absolute; y arriba a la izquierda. -

¿Te refieres a algo como esto? jsfiddle.net/Dqz3R -

2 Respuestas

HTML:

<ul>
 <li><span>Text goes here</span></li>
</ul>

CSS:

ul {
 list-style-type: none;
}
ul li {
 background: #000;
 text-align: center;
 float: left;
 padding: 30px 100px;
}
ul li span {
 display: block;
 float: left;
 margin: 0 auto;
 padding: 10px 50px;
 border-width: 0 1px;
 border-style: solid;
 border-color: #fff;
 text-align: center;
 color: #fff;
}

http://jsfiddle.net/MKf4B/

Esa es una implementación simple.

contestado el 03 de mayo de 12 a las 17:05

Hola XFortyFourx, gracias por tu respuesta, esta solución funcionó perfectamente hasta que agregué más caracteres al texto. Luego envolvió el texto a la siguiente línea, que no quiero. Voy a usar esta solución en un escenario dinámico donde el texto puede tener una cantidad x de caracteres (nunca se ajustará a la siguiente línea), pero el espacio entre la tubería y el texto siempre estará a la misma distancia. Entonces, la solución funciona bien si los personajes son siempre los mismos, pero ¿cuándo sucedió eso? ¿Alguna idea de cómo puedo hacer que esto funcione con un escenario dinámico? - Anina

¿Por qué estás usando li's para sostener las tuberías?

Creo que esto puede ser más adecuado.

<div class="container">
    <div class="text">
        Text goes here
    </div>
</div>

Con estos estilos

    .container {
        width: 500px;
        margin: auto;
    }

    .text {
        width: 250px;
        margin: auto;
    }

    .text:before {
        content: "|";
    }

    .text:after {
        content: "|";
    }

Asumo que entiendes cómo usar esto en li's, si eso es lo que realmente necesitas.

contestado el 03 de mayo de 12 a las 17:05

Esto no funcionó, ya que IE7 no puede ver el contenido: "|" parte del ccs. También probé esta solución antes, pero por alguna razón el texto siempre aparece en la parte superior del fondo negro. ¿Alguna idea de por qué sucedería esto? - Anina

Disculpas, no sabía que IE7 no es compatible con la pseudo clase. Sin embargo, no estoy seguro de lo que quiere decir con su pregunta aquí, tal vez solo necesite ajustar el margen y/o el relleno en el contenedor interior para colocarlo exactamente donde lo desea. - ohioco

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.