Question

我正试图制作某种类型的选项游戏＆＃34;通过使用两个圆圈作为按钮。在圆圈内应该有一个文本，该文本居中并且不会从圆圈伸出。但是，当文本太大时，它会在圆圈下方伸出。

HTML：

<body>
<header>
<h1>Choose</h1>
</header>

<ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bycicle with friends</li>
</ul>

</body>

CSS:

h1 {
    text-align: center;
    font-family: 'oswalditalic';
    font-size: 48px;
    margin: 0;
}
ul{
    text-align: center;
    padding: 0;
}


ul li{
    font-family: 'oswalditalic';
    display: inline-block;
    list-style-type: none;
    margin:15px 20px;
    color: black;
    font-size: 26px;
    text-align: center;

    height: 300px;
    width: 300px;
    line-height: 300px;

    -moz-border-radius: 50%;
    border-radius:50%;

    background-color: blue;
}

https://jsfiddle.net/sf3dquLs/

Answer 1

这是因为line-height对垂直居中内容的价值。当有一条线但是有两条或更多条线时它会起作用，它应用300px线高并且它太多了。

您可以将display:table-cell与vertical-align: middle结合使用，以使其有效。

h1 {
    text-align: center;
    font-family: 'oswalditalic';
    font-size: 48px;
    margin: 0;
}
ul{
    text-align: center;
    padding: 0;
    display: table;
    margin: auto; 
    border-spacing: 30px;
}


ul li{
    font-family: 'oswalditalic';
    display: inline-block;
    list-style-type: none;
    margin:15px 20px;
    color: black;
    font-size: 26px;
    text-align: center;
    display: table-cell; 
    height: 300px;
    width: 300px;
    -moz-border-radius: 50%;
    border-radius:50%;
    vertical-align: middle;
    background-color: blue;
}

<body>
<header>
<h1>Choose</h1>
</header>

<ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bycicle with friends</li>
</ul>

</body>

Answer 2

您面临的问题是line-height:300px。这样做的结果是每一行（也在自动换行后）将占用300px。我看到你添加了这个属性来居中你的文字。因此，如果我们删除该行，我们必须找到另一种方法来完成居中。另一种可能的方法是使用：before元素并赋予它一定的高度。

h1 {
  text-align: center;
  font-family: 'oswalditalic';
  font-size: 48px;
  margin: 0;
}
ul {
  text-align: center;
  padding: 0;
}
ul li {
  font-family: 'oswalditalic';
  display: inline-block;
  list-style-type: none;
  margin: 15px 20px;
  color: black;
  font-size: 26px;
  text-align: center;
  height: 300px;
  width: 300px;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: blue;
  word-wrap: break-word;
}
ul li:before {
  display: block;
  height: 120px;
  content: "";
}

<body>
  <header>
    <h1>Choose</h1>
  </header>

  <ul>
    <li>Read a book and lay on bed the whole day</li>
    <li>Go outside and ride a bicycle with friends</li>
  </ul>

</body>

如何将文本放在列表中的圆圈中心？

2 个答案: