web-dev-qa-db-fra.com

Deux Divs sur la même rangée et au centre alignent les deux

J'ai deux divs comme ça

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

Je veux qu'ils s'affichent sur la même ligne, j'ai donc utilisé float:left.

Je veux que les deux soient également au centre de la page, alors j'ai essayé de les envelopper avec un autre div comme celui-ci

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

Mais ça ne marche pas. Si je change le code en ceci

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

puis ça va au centre, mais la barre de défilement horizontale est là et on dirait qu'elle n'est pas vraiment centrée aussi.

Pouvez-vous me suggérer avec bonté comment puis-je y parvenir? Merci.

Edit: je veux que le div intérieur (Div 1 et Div 2) soit également aligné au centre.

csshtmlcenter
25
knightrider

Tu pourrais faire ça

<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. envelopper dans un div avec text-align:center;
  2. donner aux div s un display:inline-block; au lieu d'un float

Mieux vaut également mettre ce CSS dans une feuille de style.

56
Jason Gennaro

Cela pourrait-il vous être utile? Vérifiez mon JSFiddle

Et le code:

[~ # ~] 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;
}
10
Jules

les deux div flottés doivent avoir une largeur!

définissez 50% de largeur sur les deux et cela fonctionne.

BTW, le div extérieur, avec son margin: 0 auto ne se centrera que ceux qui sont à l'intérieur.

2
jackJoe

Je voterais contre display: inline-block car il n'est pas pris en charge par les navigateurs, IE <8 spécifiquement.

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

EDIT: Si aucun espacement entre les cellules n'est souhaité, changez simplement les deux .left et .right utiliser float: left;

1
brezanac

Alignez au centre, à l'aide de display: inline-block et 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>

Alignez au centre à l'aide de display: flex et 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>

Alignez au centre verticalement et horizontalement à l'aide de display: flex, justify-content: center et 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>
1
Vignesh Raja

Meilleur moyen jusqu'à présent:

  1. Si vous donnez display: inline-block; aux divisions internes, les éléments enfants des divisions internes obtiendront également cette propriété et perturberont l'alignement des divisions internes.

  2. La meilleure façon est d'utiliser deux classes différentes pour les divs internes avec largeur, marge et float.

Meilleur moyen jusqu'à présent:

Utilisez flexbox.

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

0
Gohar ul Islam

Veuillez jeter un œil sur flex cela vous aidera à arranger les choses,

sur le div principal set css display :flex

le div est à l'intérieur de l'ensemble css: flex:1 1 auto;

lien jsfiddle attaché comme exemple profitez :)

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

0
hod caspi