Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

你可以添加这个css ..

#user-count {
vertical-align: middle;
}

Answer 3

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

因此您可以使用display：flex而不是inline-block。 flex有点类似于内联块但不相同，并使用align-items：center将所有元素居中垂直

如何在canvas元素旁边的中间对齐文本

3 个答案: