垂直和水平对齐文本

Question

我知道有很多关于垂直和水平对齐文字的问题，但我已经尝试了所有内容，似乎没有任何工作。

我有CSS和HTML结构如下

＆＃13;

＆＃13;

* {
  margin:0;
  padding:0;
}
article {
  display:inline-table;
  width:190px;
  height:260px;
  border:1px solid black;
  background-color: rgb(255, 253, 233);
  position:relative;
  margin-left:20px;
  margin-top:20px;
}
ul {
  display: block;
  margin-left: auto;
  margin-right: auto;

  list-style-type:none;
  width:170px;
  height:240px;


}

ul li {

  position:relative;
  padding-top:20px;
  color: #8C460E;
  font-size:10.666667px;
  width:100%;
  height:auto;

  font-family: Tahoma, Verdana, Arial;
  border-bottom:1px dashed black;
  text-align:center;

}

＆＃13;

<article>
  <ul>
    <li><span>PRÍPRAVA DOKUMENTÁCIE PODĽA NOVÉHO ZÁKONA O POĽOVNÍCTVE:</span></li>
    <li><span>k uznávaniu poľovného revíru</span></li>
    <li><span>k zhromaždeniu vlastníkov poľovných pozemkov</span></li>
    <li><span>k zmene hranice poľovného revíru</span></li>
    <li><span>k zmluve vlastníkov spoločného poľovného revíru</span></li>
    <li style="border:0px"><span>k zmluve o užívaní poľovného revíru</span></li>
  </ul>
</article>

＆＃13;

＆＃13;

＆＃13;

我试图纵向和横向对齐文本。我尝试了从w3.org到答案的所有内容，但没有任何工作。实现目标的正确方法是什么？

Demo

Answer 1

请尝试以下操作： Demo

ul li {        
    position:relative;
    padding:8px 0; / * changed padding top value to this */
    color: #8C460E;
    font-size:10.666667px;
    width:100%;
    height:auto;        
    font-family: Tahoma, Verdana, Arial;
    border-bottom:1px dashed black;
    text-align:center;       
}

Answer 2

只需将padding-top:20px更改为padding: 10px 0;＆amp;删除你的设定高度。

* {
  margin: 0;
  padding: 0;
}
article {
  display: inline-table;
  width: 190px;
  border: 1px solid black;
  background-color: rgb(255, 253, 233);
  position: relative;
  margin-left: 20px;
  margin-top: 20px;
}
ul {
  display: block;
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
  width: 170px;
}
ul li {
  position: relative;
  padding: 10px 0;
  color: #8C460E;
  font-size: 10.666667px;
  width: 100%;
  height: auto;
  font-family: Tahoma, Verdana, Arial;
  border-bottom: 1px dashed black;
  text-align: center;
}

<article>
  <ul>
    <li><span>PRÍPRAVA DOKUMENTÁCIE PODĽA NOVÉHO ZÁKONA O POĽOVNÍCTVE:</span>
    </li>
    <li><span>k uznávaniu poľovného revíru</span>
    </li>
    <li><span>k zhromaždeniu vlastníkov poľovných pozemkov</span>
    </li>
    <li><span>k zmene hranice poľovného revíru</span>
    </li>
    <li><span>k zmluve vlastníkov spoločného poľovného revíru</span>
    </li>
    <li style="border:0px"><span>k zmluve o užívaní poľovného revíru</span>
    </li>
  </ul>
</article>

Answer 3

尝试使用填充而不是填充顶部：

ul li{
    padding: 6px,0;
}

用ul l css替换你的填充顶部。