如何將兩個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彼此相鄰居中

回答

相關問題