Question

我想知道如何使数据对齐居中我无法正确解释它所以我会在这里粘贴代码。

<div class"mainDiv">
  <ul>
      <li><dl> <dt> dynamic name </dt> <dd> dynamic value  </dd> </dl></li>
      <li><dl>
                    <dt>dynamic name</dt>
                    <dd>dynamic value</dd>
                </dl></li>
      <li><dl>
                    <dt>dynamic name  </dt>
                    <dd>dynamic value</dd>
                </dl></li>
  </ul>
</div>

主div将是100％宽度，li将包含动态数据我希望ul无中心数据是什么数据。如果我添加一个项目它应该居中，如果我添加3个项目它应该是居中。我试过了。但我的解决方案是给ul一个固定的宽度，这并没有解决我的问题，因为数据是动态的，保持宽度不是一个解决方案。

 <style>
  ul {
padding:0;
margin:0;
  }
  body {
color:#fff;
margin:0; padding:0;
  }
  .main {
  background: #000000;
  float: left;
  width: 100%;
  text-align: center;
  }
  .main ul {
  width: 100%;
  }
  .main ul li {
  width: 33.33%;
  float: left;
  }
  </style>

我添加了样式，当我添加这些数据类型时，我遇到了问题。

Answer 1

希望这会有所帮助：

<div class"mainDiv" style="margin:auto;text-align:center">
  <ul>
      <li>dynamic data</li>
      <li>dynamic data</li>
      <li>dynamic data</li>
  </ul>
</div>

Answer 2

将类添加到主div作为margin：0px auto; + text-align：center;

Answer 3

您可以将li设置为

display: inline

还有ul

text-align: center

将列表元素对齐为正常的居中段落。

Answer 4

试试此代码

<div class"mainDiv" style="text-align:center;">
 <ul>
  <li>dynamic data</li>
  <li>dynamic data</li>
  <li>dynamic data</li>
 </ul>
</div>

Answer 5

我认为，你也需要垂直居中。

以下是一篇关于中心元素的精彩文章：http://css-tricks.com/centering-in-the-unknown/

此外，

垂直对齐的工作示例：http://jsfiddle.net/eEakL/

CSS：

.mainDiv
{
    float: left;
    width: 200px;
    min-height: 500px;
    display: table;

}
ul { 
    display: table-cell;
    text-align: center;
    vertical-align: middle; }

Answer 6

您只需要一个样式规则

.main ul li dd{
     margin:0;   
}

请参阅jsfiddle

div中的动态数据以居中为中心

6 个答案: