如何讓所有的內容放置在div的中心？

{margin:0 auto}無法將所有內容放在我的案例中。如何讓所有的內容放置在div的中心？

div.whole { 
 
    width: 620px; 
 
    overflow: auto; 
 
    border: 2px solid red; 
 
} 
 
div.left, 
 
div.right { 
 
    margin: 0 auto; 
 
    float: left; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 2px solid black; 
 
} 
 
li { 
 
    list-style: none; 
 
    margin: 0 0; 
 
    padding 0 0 0 0; 
 
    display: inline-block; 
 
    border-bottom: 1px dashed black; 
 
    width: 100px; 
 
}

<div class="whole"> 
 
    <div class="left"> 
 
    <img src="images/pic.png" width="120" height="120" /> 
 
    </div> 
 
    <div class="right"> 
 
    <ul> 
 
     <li>x1</li> 
 
     <li>y1</li> 
 
    </ul> 
 
    <ul> 
 
     <li>x2</li> 
 
     <li>y2</li> 
 
    </ul> 
 
    <ul> 
 
     <li>x3</li> 
 
     <li>y3</li> 
 
    </ul> 
 
    <ul> 
 
     <li>x4</li> 
 
     <li>y4</li> 
 
    </ul> 
 
    </div> 
 
</div>

顯示的效果是，如下。

如何將左側內容 - img照片和正確的內容放在div.left和div.right的中心？如何將左邊的內容 - img照片和正確的內容放在div.left和div.right的中心？在shareeditflag的幫助下，display: inline-block;vertical-align: middle;添加到我的css中，將css文件更改爲以下內容：

div.whole{ 
 
    width:620px; 
 
    overflow:auto; 
 
    border:2px solid red; 
 
    text-align: center;} 
 

 
div.left,div.right{ 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
    float:left; 
 
    width:300px; 
 
    height:200px; 
 
    border:2px solid black; 
 
    vertical-align: middle;} 
 

 
li{ 
 
    list-style:none; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding 0 0 0 0; 
 
    display:inline-block; 
 
    border-bottom: 1px dashed black; 
 
    width:100px;}

<div class="whole"> 
 
    <div class="left"> 
 
     <img src="images/pic.png" width="120" height="120"/> 
 
    </div> 
 
    <div class="right">   
 
     <ul> 
 
     <li>x1</li><li>y1</li> 
 
     </ul> 
 
     <ul> 
 
     <li>x2</li><li>y2</li> 
 
     </ul> 
 
     <ul> 
 
     <li>x3</li><li>y3</li> 
 
     </ul><ul> 
 
     <li>x4</li><li>y4</li> 
 
     </ul> 
 
    </div> 
 
</div>

顯示的效果被改變成以下。

所有內容都是水平居中，
如何垂直製作內容？

來源

2016-02-29 it_is_a_literature

考慮在您的DIV中使用'text-align：center'來水平對齊您的元素。 – mightyheptagon

可能使用[使用文本對齊中心？]的中心圖像重複（http://stackoverflow.com/questions/7055393/ center-image-using-text-align-center） – Serlite

'margin：0 auto'只適用於'display：block'風格;） – liborza

有一種方法可以使任何東西居中。除父母之外，您不需要知道任何組件的高度或寬度。這涉及到兩件事情：

繼承人小提琴例如：https://jsfiddle.net/ahmadabdul3/eed1n1kj/1/

確保父母有一個明確的高度。我這樣說，因爲html和body有時會被遺忘。設置他們的高度100%。接下來的事情是，每個家長直到你的中心組件應該有某種高度。

這對於您將看到的centered-helper類是必需的。

第二件事，居中內容的父母應該有text-align: center，以便它可以水平居中。

最後，居中內容應設置爲vertical-align: middle以及centered-helper應具有高度100%，以便它可以幫助垂直居中您的內容。

HTML：

<div class='parent'> 
    <div class='centered'> 
    centered 
    </div> 
    <div class='centered-helper'> 

    </div> 
</div>

CSS：

.parent { 
    width: 400px; 
    height: 400px; 
    border: 1px solid black; 
    text-align: center; 
} 

.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 
.centered-helper { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
}

來源

2016-02-29 15:13:54

所有內容均爲水平居中，如何垂直製作內容？ –

將圖像置於Div中可以使用padding:進行對齊。在.div左

圍繞文本內容應作爲text-align:center簡單的.div右

來源

2016-02-29 15:05:51 JoeyG

可以使用保證金爲中心對齊。

<head> 
<style> 
div { 
    margin: auto; 
    width: 60%; 
    border: 3px solid #73AD21; 
    padding: 10px; 
} 
</style> 
</head>

來源

2016-02-29 15:11:32

的text-align屬性將適用於圖像也。

所以，你可以這樣做：

.left, .right { 
    text-align: center; 
}

，這將居中圖像了。

的jsfiddle：https://jsfiddle.net/sukritchhabra/uxve3n53/

來源

2016-02-29 15:14:06

保證金短的方法是（第一個是頂部和底部的第二個是左右

Margin:0 auto;

確保您給這個的孩子div。

來源

2016-02-29 16:53:33

如何讓所有的內容放置在div的中心？

回答

相關問題