html - 如何在 Canvas 元素旁边的中间对齐文本

Question

我需要我的文本元素位于 div 的中间和我的 Canvas 元素旁边。目前，文本在旁边但不在中间。我怎样才能达到这种效果？

顺便说一句， Canvas 包含一个图表插件，我没有包含在下面的代码片段中。

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

Answer 1

类似于 Flex :)

#user-count {
  height: 100px;
  width: 100px;
  background-color: red;
}

.card {
  background-color: #f4f4f4;
  border: none;
  padding: 10px;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

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