Is there a way to ensure that my text elements are centered within the div and positioned next to my canvas element? Currently, the texts are placed beside the canvas but not in the middle. How can I achieve this desired effect?
In addition, please note that the canvas includes a chart plugin which has not been included in the code snippets provided below.
#user-count {
height: 100px;
width: 100px;
}
.card {
background-color: #f4f4f4;
border: none;
padding:10px;
display: inline-block;
}
.card-body {
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}<div class="row">
<div class="col-md-6">
<div class="card">
<canvas id="user-count"></canvas>
<div class="card-body">
<span>current blood donors</span>
<span>as of 2017</span>
</div>
</div>
</div>