css - una - Dos Divs en la misma fila y centro alinean ambos

div en css

Question

Tengo dos divs asi

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

Quiero que se muestren en la misma fila, así que usé float:left .

Quiero que ambos estén en el centro de la página, así que traté de envolverlos con otro div como este

<div style="width:100%; margin:0px auto;">
<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>
</div>

Pero no funciona. Si cambio el código a este

<div style="width:100%; margin-left:50%; margin-right:50%">
<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>
</div>

luego va hacia el centro, pero la barra de desplazamiento horizontal está ahí y parece que tampoco está realmente centrada.

¿Puede por favor sugerirme amablemente cómo puedo lograr esto? Gracias.

Edición: Quiero que la división interna (Div 1 y Div 2) también esté alineada en el centro.

Answer 1

¿Podría esto hacer por ti? Revisa mi JSFiddle

Y el código:

HTML

<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
</div>

CSS

div.container {
background-color: #FF0000;
margin: auto;
width: 304px;
}
div.div1 {
border: 1px solid #000;
float: left;
width: 150px;
}
div.div2 {
border: 1px solid red;
float: left;
width: 150px;
}

Answer 2

Alinear al centro, usando la display: inline-block y text-align: center .

.outerdiv
{
height:100px;
width:500px;
background: red;
margin: 0 auto;
text-align: center;
}
.innerdiv
{
height:40px;
width: 100px;
margin: 2px;
box-sizing: border-box;
background: green;
display: inline-block;
}

<div class="outerdiv">
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>

Alinear al centro usando la display: flex y justify-content: center

.outerdiv
{
height:100px;
width:500px;
background: red;
display: flex;
flex-direction: row;
justify-content: center;
}
.innerdiv
{
height:40px;
width: 100px;
margin: 2px;
box-sizing: border-box;
background: green;
}

<div class="outerdiv">
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>

Alinear al centro vertical y horizontalmente usando la display: flex , justify-content: center y align-items:center .

.outerdiv
{
height:100px;
width:500px;
background: red;
display: flex;
flex-direction: row;
justify-content: center;
align-items:center;
}
.innerdiv
{
height:40px;
width: 100px;
margin: 2px;
box-sizing: border-box;
background: green;
}

<div class="outerdiv">
<div class="innerdiv"></div>
<div class="innerdiv"></div>
</div>

Answer 3

Ambos divs flotados necesitan tener un ancho!

Establecer el 50% de ancho a ambos y funciona.

Por cierto, el div exterior, con su margin: 0 auto solo se centrará en sí mismo, no los que están dentro.

Answer 4

Mejor manera hasta ahora:

1. Si das display: inline-block; a los divs internos, los elementos hijos de los divs internos también obtendrán esta propiedad y perturbarán la alineación de los divs internos.

2. Una mejor manera es usar dos clases diferentes para divs internos con ancho, margen y flotación.

La mejor manera hasta ahora:

Utilice flexbox.

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

Podrias hacer esto

<div style="text-align:center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

http://jsfiddle.net/jasongennaro/MZrym/

1. envuélvalo en un div con text-align:center;
2. Dale la pantalla de div sa interior display:inline-block; en lugar de un float

Mejor también poner ese css en una hoja de estilo.

Answer 6

Por favor, eche un vistazo a Flex , le ayudará a hacer las cosas bien,

en el div divisor principal css display :flex

el div es que dentro de css: flex:1 1 auto;

enlace jsfiddle adjunto como ejemplo disfrutar :)

https://jsfiddle.net/hodca/v1uLsxbg/

Answer 7

Votaría en contra de display: inline-block ya que no es compatible con todos los navegadores, IE <8 específicamente.

.wrapper {
width:500px; /* Adjust to a total width of both .left and .right */
margin: 0 auto;
}
.left {
float: left;
width: 49%; /* Not 50% because of 1px border. */
border: 1px solid #000;
}
.right {
float: right;
width: 49%; /* Not 50% because of 1px border. */
border: 1px solid #F00;
}
<div class="wrapper">
<div class="left">Div 1</div>
<div class="right">Div 2</div>
</div>

EDITAR: Si no se desea espacio entre las celdas, simplemente cambie tanto .left como .right para usar float: left;