Pregunta

Estoy seguro de que esta es una pregunta básica para aquellos de ustedes que trabajan en HTML y CSS regularmente.

Tengo dos piezas de texto, ambos deben aparecer en la misma línea: uno debe quedarse alineado y el otro debe centrarse, independientemente de cuánto texto hay en el bloque alineado a la izquierda (obviamente mientras la longitud de la longitud del El texto alineado a la izquierda no se extiende sobre la mitad de la marca).

Para que esto sea más fácil de entender y probar, he incluido una muestra. En mi muestra, tengo lo que necesito, pero en 2 líneas en lugar de la misma línea.

Vuelva a publicar la muestra de trabajo si encuentra una solución.

Gracias.

<html>
<head>
    <title>Alignment Test</title>
    <style>
        body {background-color: #E6E6E6;}
        #reference {width: 100%;
                    border: solid 1px navy;}
        #half1 {width: 50%;
                text-align: right;
                border-right: dotted 1px navy}
        #container {width: 100%;
                    text-align: center;
                    border: solid 1px navy;}
        #floatLeft {float:left;
                    border: dotted 1px green;
                    background-color: #D0F5A9;}
        #centered {width: 100%;
                      border: dotted 1px red;
                      background-color: #F5F6CE;}
    </style>
</head>
<body>
    <div id="reference">
        <div id="half1">Middle of container -->&nbsp;</div>
        <div id="half2"></div>
    </div>
    <div id="container">
        <div id="centered">This text should be centered
            <div id="floatLeft">This text should be left aligned</div>
        </div>
    </div>
</body>

¿Fue útil?

Solución

<div style="text-align:center;position:relative">
    Centered
    <div style="position:absolute;left:0;top:0">Left</div>
</div>

Otros consejos

La solución de Y. Shoham funciona. Aquí hay otro, que maneja el contenido de envoltura con más gracia (no permite la superposición entre el centro y la sección izquierda), pero que requiere cambiar el orden de los elementos en el marcado:

<div style="text-align: center; overflow: auto;">
  <div style="float: left; text-align: left;">left</div>
  centered
</div>

(Los text-align: left puede no marcar la diferencia, por ejemplo, si no hay un ancho especificado y nada dentro tiene un ancho inherente, como una imagen).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top