CSS Center text in circle

Question

I was trying to make a simple circle buttons to represent pizza size buttons but I'm having trouble centering the text if anyone has a solution, you can text it out your self I've tried using padding, stretches circle as well margin, no response Not sure what I'm doing wrong, thanks

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

Sebastian Brosch · Accepted Answer · 2016-04-28 06:30:18Z

Try the following code using 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>

Thank you for that and its working but now I have the other problem of moving it from the top, if you go into your code snippet and click full screen you will see what I mean.

sunixi · Accepted Answer · 2016-04-27 22:29:17Z

Amend display property of span

 #span{ display:block; }

As table-cell behave improper alignment when used other that table. It doesn't obey other rules like vertical-align , float etc.

Collectives™ on Stack Overflow

CSS Center text in circle

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related