並排居中三個div

我有三個div，我想在一個頁面中並排放置。我也有一些內容，如<p>和<h3>標籤他們並排居中三個div

HTML（例如）

<div id = "wrapper"> 

    <div class = "aboutleft"> 
     <h1> About us </h1> 
     <h3> small description </h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio nec 
      A few sentences about you go here 
     </p> 
    </div> 

    <div class = "vline"></div> 

    <div class = "aboutright"> 
     <h1> About the shop/Clients </h1> 
     <h3> small description </h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio ne 
      A few sentences about you go here 
     </p> 
    </div> 
</div>

CSS

.aboutleft 
{ 
    display:inline-block; 
    float:left; 
    width: 450px;  
} 

#wrapper 
{ 
    text-align:center; 
    width: 80%; 
    margin: 0, auto;  
} 
.aboutright 
{ 
    display: inline-block; 
    float:right; 
    width: 450px; 
} 

.vline 
{ 
    background: rgb(186,177,152); 
    display: inline-block; 
    float: left; 
    min-height: 250px; 
    margin: 0 30px; 
    width: 1px; 
}

這樣做的結果只是3個div的所有浮動主要用於將剩下。我想把他們三個都放在頁面上。

來源

2013-07-11 Cubatown

請勿在邊緣使用。在你的CSS中使用這個.wrapper將解決這個問題。

margin: 0 auto;

此外，如果您使用的是絕對寬度爲包裝的孩子，你還不如用於包裝一個固定值，以及，因爲這將集中在div WRT的孩子。

來源

2013-07-11 00:35:51 Patrick

是

margin: 0 auto

沒有逗號

也是你的div也許應該所有有

float: left

爲好。然後他們將從頁面左側流動。

Wing

來源

2013-07-11 00:41:12 wingyip

您可以刪除您的浮標。在包裝上使用text-align:center將像這樣排列您的display:inline-block元素。

我用你的內容做了一個小提琴。我還添加了一個'centerstuff'div，您應該在其中放入中心內容，並將寬度縮小，以便更清晰可見。

http://jsfiddle.net/rNcHY/

它只是margin: 0 auto，正如其他人指出。

來源

2013-07-11 00:42:24

試一下float,text-align:center;,#wrapper。由於您的塊是display:inline-block;，它們將以文本的相同方式居中。

注意n爲了使其反應，我換你所有的寬度以%代替px並刪除了一些額外的margin間距。我還添加了vertical-align:top;，所以divs沿着頂部。

#wrapper{ 
    text-align:center; 
    width: 80%; 
    margin: 0 auto; 
    text-align: center; 
} 
.aboutleft, 
.aboutright{ 
    display: inline-block; 
    vertical-align:top; 
    width: 48%; 
} 
.vline{ 
    background: rgb(186,177,152); 
    display: inline-block; 
    vertical-align:top; 
    min-height: 250px; 
    margin: 0; 
    width: 1px; 
}

http://jsfiddle.net/daCrosby/Ce3Uz/2/

來源

2013-07-11 00:54:14 DACrosby

並排居中三個div

回答

相關問題