CSS 文字居中

Question

我试图制作一个简单的圆形按钮来表示披萨大小的按钮，但我无法将文本居中，如果有人有解决方案，你可以自己写出来我试过使用填充，也拉伸圆保证金，没有反应不确定我做错了什么，谢谢

.pizzaOptions {
  margin: 1em;
  padding-top: 1%;
  width: 60%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-content: space-between;
}
input {
  opacity: 0;
}
.size {
  display: inline-block;
  margin: 1em;
  height: 100px;
  width: 100px;
  border: 15px #333 solid;
  border-radius: 50%;
  margin: auto;
}
span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
}
#small {
  font-size: 1em;
  width: 100px;
  height: 100px;
}
#medium {
  margin: 20px;
  font-size: 1.5em;
  width: 150px;
  height: 150px;
}
#large {
  font-size: 2em;
  width: 200px;
  height: 200px;
}

<div class="pizzaOptions">
  <label class="hover size" for="c1" id="small">
    <input class="items right" onclick="findTotal()" type="radio" name="size" value="4.00" id="c1"><span>SMALL <div class="displaySize"> 4"</div> <div class="displayPrice">£4.00</div></span>
  </label>

  <label class="hover size" for="c2" id="medium">
    <input class="items right" onclick="findTotal()" type="radio" name="size" value="6.00" id="c2"><span>MEDIUM <div class="displaySize"> 6"</div> <div class="price">£6.00</div></span>
  </label>

  <label class="hover size" for="c3" id="large">
    <input class="items right" onclick="findTotal()" type="radio" name="size" value="9.00" id="c3"><span>LARGE <div class="displaySize"> 9"</div> <div class="price">£9.00</div></span>
  </label>
</div>

Answer 1

使用 flexbox 尝试以下代码：

.pizzaOptions {
  margin: 1em;
  padding-top: 1%;
  width: 60%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-content: space-between;
}
input {
  opacity:0;
  position:absolute;
}
.size {
  margin: 1em;
  height: 100px;
  width: 100px;
  border: 15px #333 solid;
  border-radius: 50%;
  margin: auto;
}
span {
  text-align: center;
  vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
  width:100%;
}
label {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#small {
  font-size: 1em;
  height: 100px;
  width: 100px;
}
#medium {
  margin: 20px;
  font-size: 1.5em;
  height: 150px;
  width: 150px;
}
#large {
  font-size: 2em;
  height: 200px;
  width: 200px;
}

<div class="pizzaOptions">
  <label class="hover size" for="c1" id="small">
    <input class="items right" onclick="findTotal()" type="radio" name="size" value="4.00" id="c1"><span>SMALL <div class="displaySize"> 4"</div> <div class="displayPrice">£4.00</div></span>
  </label>
  <label class="hover size" for="c2" id="medium">
    <input class="items right" onclick="findTotal()" type="radio" name="size" value="6.00" id="c2"><span>MEDIUM <div class="displaySize"> 6"</div> <div class="price">£6.00</div></span>
  </label>
  <label class="hover size" for="c3" id="large">
    <input class="items right" onclick="findTotal()" type="radio" name="size" value="9.00" id="c3"><span>LARGE <div class="displaySize"> 9"</div> <div class="price">£9.00</div></span>
  </label>
</div>

Answer 2

修正跨度

的显示属性

 #span{
  display:block;
}

因为 table-cell 在使用其他 table 时表现不正确对齐。它不遵守其他规则，如 vertical-align 、 float 等。

CSS 文字居中

CSS Center text in circle

css

css-shapes