如何使子弹在无序列表上垂直对齐？

Question

如何完美地对齐我的所有子弹？

预期结果：子弹相互排列 实际结果：它们的移动取决于

的文本大小

JSFiddle澄清： https://jsfiddle.net/hk12hhp1/

我想要的结果（看红线）： http://prntscr.com/grt24m（使子弹对齐就像红线一样直线）

小提琴代码：

<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
#center-everything{
  text-align: center;
  background-color: gray;
  height:  100px;
  width:  200px;
  list-style-position: inside;
}

注意：我仍然希望text-align成为中心

Answer 1

另一种解决方案，使用伪元素创建项目符号，position: absolute将其定位在左侧。

#center-everything {
  text-align: center;
  background-color: gray;
  height: 100px;
  width: 200px;
  list-style-position: inside;
}

ul {
  list-style: none;
}

li {
  padding-left: 20px;
  position: relative;
}

li:before {
  content: '☻';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 10px;
}

<div id='center-everything'>
  <ul>
    <li>test1wef</li>
    <li>test2ferwfwergwerg</li>
    <li>test3grew</li>
  </ul>
</div>

Answer 2

你想要在中心列表上垂直对齐子弹，你的问题根本不清楚。

在中心列表中将子弹一直向左移动不是任何标准的排版约定，所以我想你可能真的要问的是容器内的整个左对齐列表？我看到这个问题比让子弹一直漂到左边更常见。

#center-everything {
  text-align: center;
  background-color: gray;
  height: 100px;
  width: 300px;
  list-style-position: inside;
}

ul {
  text-align: left;
  padding-left: 0; /* remove any padding to stop it throwing off the "center" */
  margin: auto; /* center the ul */
  display: inline-block; /* hack to make the ul only as wide as its contents */
}

<div id='center-everything'>
  <ul>
    <li>test1wef</li>
    <li>test2ferwfwergwerg</li>
    <li>test3grew</li>
  </ul>
</div>

要做到这一点，你只需要更改ul的样式，别无其他。

Answer 3

#center-everything{
  background-color: gray;
  height:  100px;
  width:  300px;
}

li {
  display: inline-block;
}

li:before {
  content: "■"
}

span {
  position: absolute;
	left: 150px;
	transform: translateX(-50%);
}

<div id='center-everything'>
<ul>
<li></li><span>test1wef</span><br>
<li></li><span>test2wef</span><br>
<li></li><span>test3wef</span><br>  
</ul>
</div>