html - 如何让所有的内容都放在div的中心？

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 photo 和右边的内容放在div.left 和div.right 的中间？如何将左边的内容--img photo和右边的内容放在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 上

居中文本内容应该像 text-align:centeron .div-right 一样简单