圈子中的CSS中心文本

我试图做一个简单的圆形按钮来表示比萨尺寸按钮，但是如果任何人有解决方案，我无法将文本居中，您可以将它用文字表示出来我已经尝试使用填充，绵延圈以及保证金，没有任何反应不知道我在做什么错了，感谢圈子中的CSS中心文本

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

来源

2016-04-27 Josh

试试下面的代码中使用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>

来源

2016-04-27 22:14:23

谢谢你，它的工作，但现在我有另一个问题，从顶部移动它，如果你进入你的代码片段，并点击全屏你会明白我的意思。 – Josh

更新后的答案现在应该可以工作 –

修改跨度

#span{ 
    display:block; 
}

的显示特性如表小区其他使用该表时表现不适当的对准。它不服从其他规则，如垂直对齐，浮动等。

来源

2016-04-27 22:29:17 sunixi

圈子中的CSS中心文本

回答

相关问题