如何使用div引入方形，并使用css对齐文本

Question

如何使用div引入方形并使用css对齐文本？

我想显示图表图例 squareshapeimage（使用div）图例文字

我试过以下方式，但字体在下面

<div> <div vertical-align: middle; margin-bottom: 0.75em; style="width:5%; height:5%; margin-top:4%; margin-left:3%; padding-bottom:5%;background-color:red"> </div> <span>Present</span> </div>

Answer 1

你正在寻找这样的东西吗？

＆＃13;

＆＃13;

.a {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid rgb(0, 0, 0);
}
.a span {
  position: absolute;
  right: 10px;
  top: -10px;
  display: block;
  background-color: #FFF;
  padding: 0 5px;
}

＆＃13;

<div class="a">
  <span>Present:</span>
</div>

＆＃13;

＆＃13;

＆＃13;