将display属性值更改为inline-block即可实现此目的。

.legend {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: orange;
    vertical-align: middle;/* Ensures that the text is vertically aligned in the middle */
}

<div class="legend"></div> New Order

要显示文本旁边的框，并给予它适当的行高，你可以使用下面的代码：

.legend-wrapper {
  line-height: 40px; /* Same as the height of the block */
}

.legend {
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
  margin-right: 10px; /* Add some between text and block */
}

<div class="legend-wrapper">
    <div class="legend"></div> New Order
</div>

使用方式

display: inline-table;

而不是

display: table;

.legend {
  display: inline-table;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
}

<div class="legend"></div> New Order

你可以把你的文本放入一个span标签中，只给予span标签行高属性，然后它将在.legend框旁边的中心
新秩序