Comment centrer deux divs flottant l'un à côté de l'autre
j'ai écrit le HTML suivant en essayant de centrer deux div l'un à côté de l'autre.
<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>
cependant, le code que j'ai écrit résulte dans les deux div's flottant jusqu'à la gauche. Ce que cela fait correctement est flotter les deux div's côte à côte.
Qu'est-ce que je dois changer pour centrer les deux div côte à côte?
7 réponses
Vous aurez pour définir automatiquement la marge et probablement une largeur spécifique à votre wrapper div
<div id="wrapper"></div>
Dans ton CSS:
#wrapper {
width: 70%;
margin: 0 auto;
}
au Lieu d'utiliser float: left, utilisez 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>
le haut de chaque intérieur div est maintenu aligné en utilisant vertical-align: top.
exemple:http://jsfiddle.net/hCV8f/1/
essaye ceci:
<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>
connaissez-vous la largeur de divs à l'avance? Si c'est le cas, vous pouvez simplement faire quelque chose comme
<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>
pour le div de gauche, réglez la marge de gauche. Pour la bonne div, mettez la droite. Comme ceci:
#leftDiv {
margin-left: auto;
}
#rightDiv {
margin-right: auto;
}
cela les replace au centre de l'écran.
le code ci-dessous fonctionne très bien avec Zebra GC420d Imprimante:
<!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>
j'Espère que ça aide !
ci-Dessous a fonctionné pour moi
<div id='wrapper'>
<div class='inner'>
content 1
</div>
<div class='inner'>
content 2
</div>
</div>
CSS:
.wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}