Centra una delle due div di pari livello

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

  •  19-08-2019
  •  | 
  •  

Domanda

Di seguito, vorrei modificare il CSS in modo tale che fratello di destra sia veramente centrato nel div container . (Modifica: senza usare il posizionamento assoluto). 

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

Nella sua attuale implementazione, il centraggio del fratello destro è influenzato dal fratello sinistro - puoi vederlo aggiungendo display: none al fratello sinistro stile.

(Nota: vorrei evitare di modificare la struttura HTML perché, a quanto ho capito, il punto centrale del CSS è disaccoppiare la struttura dei tag dalla logica di presentazione, e questa non sembra una richiesta davvero folle per CSS da gestire.)

TIA.

È stato utile?

Soluzione

Un trucco che ho usato per far funzionare tutto questo è avere un'imbottitura a sinistra del contenitore e possiamo incoraggiare il fratello sinistro a sedersi all'interno di questo spazio dandogli un margine uguale ma negativo.

Per completare l'immagine mettiamo anche un'imbottitura a destra del contenitore di dimensioni uguali alla larghezza del fratello sinistro. 

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

Altri suggerimenti

Prova a impostare una larghezza per il fratello sinistro e un'imbottitura pari a destra: il fratello destro

così 

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

Puoi cambiare il float: left; su # left-sibling in position: absolute; . Questo lo eliminerà dal normale flusso, quindi non influirà più sul fratello di destra.

Naturalmente, questo potrebbe avere altri effetti collaterali con il tuo design.

Dovresti sempre impostare una larghezza sugli elementi fluttuati, altrimenti le cose si fanno strane :)

Se metti un 

border: solid 1px #000;

regola su entrambi i div vedrai cosa sta succedendo - il div # fratello di destra sta riempiendo l'intera larghezza del div parent (#container), quindi sebbene il testo sia effettivamente allineato al centro , sembra che non lo sia!

L'attributo text-align controlla l'allineamento dei contenuti nel contenitore in cui viene applicato l'attributo. Aggiungendo i seguenti stili è facile da vedere: 

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

Suggerirei di aggiungere un tipo di documento al documento per evitare la modalità quirks 

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

e i seguenti stili: 

#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; }

Ovviamente vorresti adattare le dimensioni dei fratelli alle tue esigenze. I confini fanno un buon lavoro mostrando ciò che sta realmente accadendo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top