CSS。移动设备上的中心块答案

【问题标题】：CSS. Center block on the mobile devicesCSS。移动设备上的中心块
【发布时间】：2015-03-13 19:03:02
【问题描述】：

首先我需要在页面中心显示这个块（没有静态宽度，因为它会显示在各种移动设备上）。

我需要在一条垂直线上显示这个 ul 列表，所以第二个 li 应该从第一个 li 的同一个地方开始。我不能使用静态宽度、text-align: left 和 margin: 0 auto，因为它应该适用于任何移动设备。

目前情况：

  Test

  Test Test
    Test
  Test Test

我需要这个不固定的屏幕宽度：

  Test

  Test Test
  Test
  Test Test

【问题讨论】：

标签： html css

【解决方案1】：

//编辑： 我对此进行了更新，因此您的文本块现在位于父容器的中心。您必须使用具有以下 css 的此解决方案的父容器

.test {
    text-align: left;
    display: inline-block
    
}

ul {
    list-style: none;
    padding: 0;
}

.container {
    width: 100%;
    display: inline-block;
    position: relative;
    text-align: center;
}

<div class="container">
<div class="test">
    <div>
        Test
    </div>
    <ul>
        <li>Test Test</li>
        <li>Test</li>
        <li>Test Test</li>
    </ul>
</div>
</div>

因为ul 有一个标准的填充，你应该删除它

【讨论】：

抱歉，ul padding 中没有问题。我忘了提到那个块应该在页面的中心。

【解决方案2】：

一般应该先有一个reset.css（重置所有默认元素行为），我先做了最小的而不是reset.css，然后你可以使用下面的css

* {margin:0; padding:0;} /*use reset.css here*/

.test {
    text-align: center;
}

ul {
    list-style: none;
    text-align:left;
    display: inline-block; /*this does the trick*/
}

【讨论】：

欢迎您:-)。附加说明：display inline-block 将 ul 调整为最长 li 的宽度，并以 div 的 text-align center 为中心。这可能会导致 ul 的不同位置/宽度。如果您希望 ul 处于相同的位置和大小，可以将 li 设置为固定宽度，例如 --> li {width: 200px}... 左右