如何将两个div彼此相邻居中

我已经编写了下面的HTML，试图将两个div的中心相邻。如何将两个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>

但是，我写的代码导致两个div的结果一直浮动到左边。这样做正确的做法是将两个div并排放置。

我需要改变以将两个div并排居中？

来源

2011-03-18 Daniel Allen Langdon

你将不得不自动保证金，可能一个特定的宽度设置为您的包装股利

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

在你的CSS：

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

来源

2011-03-18 20:10:42 Daff

我有点理解你在说什么;但为什么'保证金'有两个价值？ – 2011-03-18 20:16:05

基本保证金最多可以设置四个值[顶部，右侧，底部，左侧]。有了两个值，您可以设置[上下左右]空白（设置左右自动使其居中），只有一个值可以为每侧设置相同的空白。 – Daff 2011-03-18 20:19:54

我有完全相同的问题，我试过你的解决方案：http://jsfiddle.net/6ARJX/9/虽然没有为我工作。任何建议？ – 2011-07-22 09:21:31

你知道，这两个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>

来源

2011-03-18 20:11:14 Jacob

试试这个：

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

来源

2011-03-18 20:57:15

+为简单起见。 'float：left'和'float：right'值都是需要的，没有额外的包装和CSS。 – dk123 2013-02-15 10:55:13

而不是使用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>

每个顶部内部div通过使用保持对齐vertical-align: top。

实施例：http://jsfiddle.net/hCV8f/1/

来源

2014-05-04 23:31:21

'display：inline-block'并不总是有效，但它是你需要检查的第一件事。 – 2015-08-10 10:19:42

它会工作。只要确保左右div的内容不是太大，否则它们会下降一个。一个例子。如果右侧部分有很多文字，则给它一个固定的宽度以包装文字。 – dreamerkumar 2015-09-21 16:33:43

对于左侧的div，设置左边距。对于正确的div，设置正确的。就像这样：

#leftDiv { 
    margin-left: auto; 
} 

#rightDiv { 
    margin-right: auto; 
}

这使他们回到屏幕中央备份。

来源

2015-07-07 18:06:27 corpico

下面的代码工作正常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>

希望它能帮助！

来源

2016-02-04 14:26:15

如何将两个div彼此相邻居中

回答

相关问题