Allinea un bordo circolare: html, css, css3, twitter-bootstrap-3, forme css

Ho difficoltà ad allineare il mio bordo circolare al testo sopra di esso e centrare il testo all'interno del cerchio. Quando commento il file width: 80px; nel mio .oval class allora sembra essere allineato, tuttavia il cerchio viene distorto

<div class="container body-content">
<div class="row tab-content">
<div class="jumbotron">
<h1>Welcome, Admin</h1>
<p class="lead">Please select one of the tabs above to begin</p>
</div>
<div class="row adminrow">
<div class="col-xs-2 col-xs-offset-1">
<h4>Total Users</h4>
<div class="oval">
<h4>100</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Unauthorized Users</h4>
<div class="oval">
<h4>25</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Total Games</h4>
<div class="oval">
<h4>0</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Games Played</h4>
<div class="oval">
<h4>80</h4>
</div>
</div>
<div class="col-xs-2">
<h4>Investigator Groups</h4>
<div class="oval">
<h4>2</h4>
</div>
</div>
</div>
</div>
</div>

La mia classe CSS è la seguente

.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 30px;
}

.jumbotron {
text-align: center;
}

.adminrow {
text-align: center;
}

.oval {
width: 80px;
height: 80px;
border-radius: 50%;
background: #000000;
color: white;
text-align: center;
}

risposte:

L'aggiunta di questo farebbe quello che vuoi?

.oval {
line-height: 80px;
}

devi solo cambiare il file display proprietà del cerchio:

{
border-radius: 50%;
display: block;
width: 80px;
line-height: 80px;
text-align: center;
// other properties
}