Question

我试图制作一个简单的圆形按钮来表示披萨大小的按钮，但如果有人有解决方案，我可能无法将文本集中在一起，你可以将它发送给自己我已尝试使用过填充，也延伸圈保证金，没有回应不知道我做错了什么，谢谢

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

的显示属性

 #span{
  display:block;
}

由于表格单元格在使用其他表格时表现不正确。它不遵守其他规则，如vertical-align，float等。

CSS中心文本圈

2 个答案: