Question

{margin:0 auto}无法将所有内容放在我的案例中。

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>

显示的效果更改为以下内容。

所有内容都水平居中，
如何垂直制作内容？

Answer 1

将图像置于Div中心，您可以使用padding:进行对齐。在.div-left

将文本内容居中应该像。{niv-right

上的text-align:center一样简单

Answer 2

您可以使用边距进行居中对齐。

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

Answer 3

有一种方法可以使任何事情集中。除了父母之外，您不需要知道任何组件的高度或宽度。这涉及到以下几点：

这是一个小提琴示例：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%;
}

Answer 4

text-align属性也适用于图像。

所以你可以这样做：

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

这也将使图像居中。

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

Answer 5

保证金的简短方法是（首先是顶部和底部，第二个是左和右。

    Margin:0 auto;

确保你给这个div的孩子。

如何将所有内容放在div的中心？

5 个答案: