Reputation: 837
I am having difficulty aligning my circular border to the text above it, and centering the text within the circle. When I comment out the width: 80px;
in my .oval
class then it appears to be aligned however the circle is then distorted
<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>
My CSS class is as follows
.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;
}
Upvotes: 0
Views: 73
Reputation: 4274
you just need to change the display
property of circle:
{
border-radius: 50%;
display: block;
width: 80px;
line-height: 80px;
text-align: center;
// other properties
}
Upvotes: 1
Reputation: 312
Would adding this do what you want ?
.oval {
line-height: 80px;
}
Upvotes: 1