Html 如何将两个并排浮动的 div 居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5357310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center two divs floating next to one another
提问by Vivian River
I have written the following HTML trying to center two div's next to each other.
我编写了以下 HTML，试图将两个 div 彼此相邻居中。
<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>
However, the code I've written results in the two div's floating all the way to the left. What this does do correctly is float the two div's side by side.
但是，我编写的代码导致两个 div 一直向左浮动。这样做正确的是将两个 div 并排浮动。
What do I need to change to center the two div's side by side?
我需要更改什么才能将两个 div 并排居中？
采纳答案by Daff
You will have to automatically set the margin and probably a specific width to your wrapper div
您将必须自动为您的包装器 div 设置边距和可能的特定宽度
<div id="wrapper"></div>
In your CSS:
在你的 CSS 中：
#wrapper {
width: 70%;
margin: 0 auto;
}
回答by jason_ruz
Instead of using float: left, use display: inline-block:
而不是使用float: left，使用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>
The top of each inner divis kept aligned by using vertical-align: top.
每个内部的顶部div使用 保持对齐vertical-align: top。
Example: http://jsfiddle.net/hCV8f/1/
回答by Steve Wellens
Try this:
尝试这个：
<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>
回答by Jacob
Do you know the width of both divs in advance? If so, you can just do something like
你div提前知道两个s的宽度吗？如果是这样，你可以做类似的事情
<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>
回答by corpico
For the left div, set the left margin. For the right div, set the right. Like this:
对于左侧 div，设置左边距。对于正确的div，设置正确。像这样：
#leftDiv {
margin-left: auto;
}
#rightDiv {
margin-right: auto;
}
This puts them back to back in the center of the screen.
这使它们背靠背位于屏幕中央。
回答by Aditya P Bhatt
Below code works fine with Zebra GC420dPrinter:
下面的代码适用于Zebra GC420d打印机：
<!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>
Hope it helps !
希望能帮助到你 ！
回答by Anand
Below worked for me
下面为我工作
<div id='wrapper'>
<div class='inner'>
content 1
</div>
<div class='inner'>
content 2
</div>
</div>
CSS:
CSS：
.wrapper
{
text-align: center;width:auto;margin:0 auto
}
.inner
{
display:inline-block;
}
