Posicionamento CSS - Problema Flutuante para Esquerda e Centrada

StackOverflow https://stackoverflow.com/questions/2146145

  •  23-09-2019
  •  | 
  •  

Pergunta

Tenho certeza de que esta é uma pergunta básica para aqueles que trabalham em HTML e CSS regularmente.

Eu tenho dois pedaços de texto, ambos precisam aparecer na mesma linha - é preciso ficar alinhado e o outro precisa ser centrado, independentemente de quanto texto está no bloco alinhado à esquerda (obviamente enquanto o comprimento do O texto alinhado à esquerda não se estende pela marca intermediária).

Para facilitar o entendimento e o teste, incluí uma amostra. Na minha amostra, tenho o que preciso, mas em 2 linhas em vez da mesma linha.

Por favor, repasse a amostra de trabalho se encontrar uma solução.

Obrigado.

<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>

Foi útil?

Solução 

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

Outras dicas

Y. A solução de Shoham funciona. Aqui está outro, que lida com o conteúdo de embalagem de maneira mais graciosa (não permite a sobreposição entre o centro e a seção esquerda), mas que requer alteração da ordem dos itens na marcação: 

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

(O text-align: left pode não fazer a diferença, por exemplo, se não houver largura especificada e nada dentro tem uma largura inerente, como uma imagem.)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top