Html 将文本居中对齐到浮动div的右侧

我想创建三个div，它们是分别着色的小方框：

<div class="foo blue"></div>Blue
<div class="foo purple"></div>Purple
<div class="foo wine"></div>Wine

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

蓝色
紫色
葡萄酒
傅先生{
浮动：左；
宽度：20px；
高度：20px；
保证金：5px；
边框：1px实心rgba（0,0,0,2）；
}
蓝先生{
背景：#13b4ff；
}
紫色{
背景：ab3fdd；
}
.葡萄酒{
背景：#ae163e；
}

这适用于所有内容，但我需要每个框旁边的文本与其相应div的右侧对齐。所有内容都应在一行中，文本与其div垂直对齐。这只会强制文本超出三个div的范围。用什么合适的方法把它连接起来

---

jsiddle:

将

浮点：left

替换为：

.foo {
  display: inline-block;
  vertical-align: middle;
}

---

这是小提琴：

使用flexbox，使用

内联flex

和

对齐项目：居中，但首先需要将元素包装到另一个标记中

代码片段：

<div class="table-row">
  <div class="table-cell">
    <div class="foo blue"></div>
  </div>
  <div class="table-cell">Blue</div>
  <div class="table-cell">
    <div class="foo purple"></div>
  </div>
  <div class="table-cell">Purple</div>
  <div class="table-cell">
    <div class="foo wine"></div>
  </div>
  <div class="table-cell">Wine</div>
</div>


ul{
保证金：0；
填充：0；
列表样式：无；
}
ul>li{
显示：内联flex；
对齐项目：居中；
}
傅先生{
显示：内联块；
宽度：20px；
高度：20px；
保证金：5px；
边框：1px实心rgba（0,0,0,2）；
}
蓝先生{
背景：#13b4ff；
}
紫色{
背景：ab3fdd；
}
.葡萄酒{
背景：#ae163e；
}


蓝色


紫色


葡萄酒

您必须稍微重新安排HTML结构。我已经使用CSS Flexbox来满足您的需求

请查看下面的代码或签出此代码

了解更多关于


。物品夹{
显示器：flex；
}
.项目{
显示器：flex；
对齐项目：居中；
右边距：10px；
}
.项目：最后一个孩子{
右边距：0；
}
傅先生{
宽度：20px；
高度：20px；
保证金：5px；
边框：1px实心rgba（0,0,0,2）；
}
蓝先生{
背景：#13b4ff；
}
紫色{
背景：ab3fdd；
}
.葡萄酒{
背景：#ae163e；
}

蓝色
紫色
葡萄酒
如果希望div的行为类似于一个表，可以使用CSS来定义。在某些情况下，我觉得它非常直观和简单：

HTML:

<div class="table-row">
  <div class="table-cell">
    <div class="foo blue"></div>
  </div>
  <div class="table-cell">Blue</div>
  <div class="table-cell">
    <div class="foo purple"></div>
  </div>
  <div class="table-cell">Purple</div>
  <div class="table-cell">
    <div class="foo wine"></div>
  </div>
  <div class="table-cell">Wine</div>
</div>