Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can't seem to get the text centered vertically within the div. Any help would be greatly appreciated.
You can check out the current solution on Fiddle.
.outer {
display: table;
border: 2px solid red;
width: 200px;
height: 200px;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid blue;
width: 50%;
}
.number-box {
display: inline-block;
border: 1px solid green;
border-radius: 30px;
width: 60px;
height: 60px
}
.number {
display: inline-block;
border: 2px solid blue;
font-size: 28px;
}
<div class="outer">
<div class="inner">
<div class="number-box">
<div class="number">1</div>
</div>
</div>
</div>
EDIT
After some further tweaking, here is what was actually needed:
<style>
.outer {
border: 2px solid red;
width: 100%;
display: table;
vertical-align: middle;
}
.cell1 {
border: 2px solid red;
width: 10%;
display: table-cell;
vertical-align: middle;
}
.cell2 {
vertical-align: middle;
font-size: 22px;
border: 2px solid red;
width: 90%;
display: table-cell;
}
.number-box {
display: table;
border: 1px solid green;
border-radius: 30px;
width: 60px;
height: 60px;
vertical-align: middle;
margin: 0 auto;
}
.number {
font-size: 18px;
line-height: 28px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="outer">
<div class="cell1">
<div class="number-box">
<div class="number">1</div>
</div>
</div>
<div class="cell2">
xxxxas asd ad asd asd asd asd asda adsasd asd asd asdkajsd asd asda sd adasd asdasdasdasd ad asd asd asd asd asd asd as dad asd asdadasda sda dasdasdadasdad
</div>
</div>