um centro de duas divs irmãos

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

  •  19-08-2019
  •  | 
  •  

Pergunta

A seguir, eu gostaria de alterar o CSS de modo que o right-sibling é realmente centrado na div container. (Editar: sem o uso de posicionamento absoluto). 

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
      }
      #right-sibling {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>

Na sua implementação atual, centralização do irmão direito é afetado pelo irmão esquerda -. Você pode ver isso adicionando display: none ao estilo do left-sibling

(Nota: Eu gostaria de evitar modificar a estrutura HTML, porque, como eu o entendo, todo o ponto de CSS é dissociar a estrutura tag da lógica de apresentação, e este não parece ser um pedido muito louco para CSS de manusear.)

TIA.

Foi útil?

Solução

Um truque que eu usei apenas para chegar a este trabalho é ter estofo à esquerda do recipiente e podemos incentivar o irmão deixou para sentar dentro deste espaço, dando-lhe uma margem igual, mas negativo.

Para completar o quadro também colocar preenchimento à direita do recipiente de um tamanho igual à largura da-irmão esquerda. 

<html>
  <head>
      <style type='text/css'>      
        #container {
            width: 500px;
            padding-left:50px;
            padding-right:50px;     
            }      
        #left-sibling {
            border: solid 1px #000;
            float: left;
            width:50px;
            margin-left:-50px;  
        }      
        #right-sibling {
            border: solid 1px #000;
            text-align: center;

        }
        #container2 {
            width: 500px;   
            }  
</style>
  </head>
    <body>
        <div id='container'>      
            <div id='left-sibling'>Spam</div>
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container'> 
            <div id='left-sibling' style="display:none;">Spam</div>    
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
        <div id='container2'> 
            <div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
        </div>
      </body>
</html>

Outras dicas

Tente configurar uma largura para o irmão à esquerda e um igual padding-right: para o irmão direito

como assim 

<html>
  <head>
    <style type='text/css'>
      #container {
        width: 500px;
      }
      #left-sibling {
        float: left;
        width:50px;
      }
      #right-sibling {
        text-align: center;
        padding-right:50px;
      }
    </style>
  </head>
  <body>
    <div id='container'>
      <div id='left-sibling'>Spam</div>
      <div id='right-sibling'>Eggs</div>
    </div>
  </body>
</html>

Você pode alterar a float: left; em #left-sibling para position: absolute;. Isto irá levá-lo para fora do fluxo normal, por isso não vai afetar irmão-direita mais.

É claro que isso pode ter outros efeitos colaterais com o seu design.

Você deve sempre definir uma largura em elementos flutuantes, caso contrário as coisas ficam estranhas:)

Se você colocar um 

border: solid 1px #000;

regra em ambos os divs você vai ver o que está acontecendo - a div #-irmão direita está enchendo toda a largura da div pai (#container), portanto, embora o texto é realmente alinhado ao centro , parece que não é!

Os controlos atributo de texto-align o alinhamento dos conteúdos do recipiente em que o atributo é aplicado. Ao adicionar os seguintes estilos é fácil de ver: 

#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }

Eu gostaria de sugerir a adição de um tipo de documento para o documento para evitar quirksmode 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e os seguintes estilos: 

#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }

Você seria, naturalmente deseja ajustar o tamanho dos irmãos para atender às suas necessidades. As fronteiras faz um bom trabalho mostrando o que realmente está acontecendo.

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