如何让所有的内容放置在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的中心？

回答

相关问题