Come centrare due div galleggianti uno accanto all'altro

Ho scritto il seguente codice HTML cercando di centrare due div uno vicino all'altro.Come centrare due div galleggianti uno accanto all'altro

<div id='wrapper' style='text-align:center;'> 
    <div style='float:left;'> 
     Lorem ipsum<br /> 
     dolor sit amet 
    </div> 
    <div style='float:left;'> 
    Lorem ipsum<br /> 
    dolor sit amet 
    </div> 
</div>

Tuttavia, il codice che ho scritto risulta in virgola mobile a sinistra. Ciò che fa correttamente è far galleggiare le due div a fianco.

Cosa devo cambiare per centrare le due div a fianco?

fonte

2011-03-18 Daniel Allen Langdon

Si dovrà impostare automaticamente il margine e, probabilmente, una larghezza specifica per il vostro involucro div

<div id="wrapper"></div>

nel CSS:

#wrapper { 
    width: 70%; 
    margin: 0 auto; 
}

fonte

2011-03-18 20:10:42 Daff

Capisco cosa stai dicendo; ma perché il "margine" ha due valori? –

In sostanza il margine può avere fino a quattro valori impostati [in alto, a destra, in basso, a sinistra]. Con due valori si imposta il margine [top-bottom, left-right] (l'impostazione da sinistra a destra a auto lo fa centrare) con un solo valore si imposta lo stesso margine per ogni lato. – Daff

Ho avuto esattamente lo stesso problema e ho provato la soluzione: http://jsfiddle.net/6ARJX/9/ Non ha funzionato per me, comunque. Qualche suggerimento? –

Sai la larghezza di entrambe le div s in anticipo ? Se è così, si può solo fare qualcosa di simile

<div class="wrapper" style="margin: 0 auto; width: 200px"> 
    <div class="inner1" style="width: 100px; float:left;"></div> 
    <div class="inner2" style="width: 100px; margin-left: 100px"></div> 
</div>

fonte

2011-03-18 20:11:14 Jacob

Prova questo:

<div id='wrapper' style='text-align:center;'> 
    <div style='float:left;background-color:red;width:50%'> 
     Lorem ipsum<br />dolor sit amet 
    </div> 
    <div style='float:right;background-color:blue;width:50%'> 
     Lorem ipsum<br />dolor sit amet 
    </div> 
</div>

http://jsfiddle.net/JDAyt/

fonte

2011-03-18 20:57:15

+1 per semplicità. I valori 'float: left' e' float: right' sono tutto ciò che è necessario senza il wrapping e il css aggiuntivi. – dk123

Invece di usare float: left, utilizzare display: inline-block:

<div id='wrapper' style='text-align: center;'> 
    <div style='display: inline-block; vertical-align: top;'> 
     Lorem ipsum<br /> 
     dolor sit amet,<br /> 
     consectetur adipisicing elit 
    </div> 
    <div style='display: inline-block; vertical-align: top;'> 
     Lorem ipsum<br /> 
     dolor sit amet 
    </div> 
</div>

La parte superiore di ogni inner div viene mantenuto allineato usando vertical-align: top.

Esempio: http://jsfiddle.net/hCV8f/1/

fonte

2014-05-04 23:31:21

'display: inline-block' non funziona sempre, ma è la prima cosa che devi controllare. –

Funzionerà. Assicurati che i contenuti del div di destra e di sinistra non siano troppo grandi, altrimenti cadranno uno sotto l'altro. Un esempio. Se la sezione destra ha molto testo, assegnagli una larghezza fissa per avere il testo avvolto. – dreamerkumar

Per il div sinistra, impostare il margine sinistro. Per il div giusto, imposta il giusto. In questo modo:

Questo li riporta di nuovo al centro dello schermo.

fonte

2015-07-07 18:06:27 corpico

Sotto codice funziona bene con Zebra GC420d stampante:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css"> 
    html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; } 
    #div { min-height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div style="border: 0px solid red;"> 
    <table border="0" width="100%" align="center"> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo $name; 
    ?> 
    </td> 
    </tr> 
    <tr><td></td></tr> 
    <tr> 
    <td style="text-align: center;"> 
    <?php 
    echo 'https://goo.gl/2QvRXf'; 
    ?> 
    </td> 
    </tr> 

    </table> 
    </div> 

    </body> 
    </html>

Speranza che aiuta!

fonte

2016-02-04 14:26:15

Come centrare due div galleggianti uno accanto all'altro

risposta

Problemi correlati