Html 垂直居中放置div，并使地图图例的文本保持右侧

我试图为一张地图创造一个传奇，但当标题太长时，我遇到了一些麻烦

我要找的是一个垂直居中的

img

&

图例块

，以及它们右边的所有文本（看起来像当前的第三个图例）

我尝试在

中使用
垂直对齐：中间
。删除btn
和
。图例块
，但它不起任何作用



#图表图例{
宽度：200px；
填充：10px；
边框：黑色1px实心；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：14px；
}
.图例值{
边缘底部：15px；
}
.图例块{
宽度：40px；
高度：20px；
浮动：左；
右边距：10px；
边框：#bbb实心1px；
背景色：#D3；
}
.删除btn{
浮动：左；
高度：20px；
右边距：10px；
}

你好
我太长了，所以我去了我不该去的地方呵呵，我是一个糟糕的传奇
这是个陷阱，因为我太矮了
我用你的小提琴做了一个例子，最好是在每个位置添加一个“包装”宽度，垂直对齐，如下所示：

添加以下CSS：

 .valign{
    display: table-cell;
    vertical-align: middle;
}

然后是HTML（只针对橙色的那一个）


我太长了，所以我去了不该去的地方呵呵，我很难受


“表格单元格”对于垂直对齐非常有用

下面是垂直对齐的附加建议：
将文本包装在div中。然后使用
显示：内联块
和
垂直对齐：中间
将它们对齐。您还需要指定块的宽度，因为
内联块
容器将拉伸到其内容，从而破坏
内联块


#图表图例{
宽度：200px；
填充：10px；
边框：黑色1px实心；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：14px；
}
.图例值{
边缘底部：15px；
}
.图例块{
宽度：40px；
高度：20px；
右边距：10px；
边框：#bbb实心1px；
背景色：#D3；
显示：内联块；
垂直对齐：中间对齐；
}
.图例文本{
宽度：80px；
显示：内联块；
垂直对齐：中间对齐；
}
.删除btn{
高度：20px；
右边距：10px；
显示：内联块；
垂直对齐：中间对齐；
}

你好
我太长了，所以我去了我不该去的地方呵呵，我是一个糟糕的传奇
这是个陷阱，因为我太矮了
这里有一个使用的方法（如果您可以在项目中使用）

看这个

我添加了以下样式：

.legend-value {
    margin-bottom:15px;
    display:flex;
    align-items:center;
}

然后将
最小宽度
添加到
。图例块
和
。删除btn
我只是在胡闹，这就是发生的事情

在CSS中，我添加了一个新类，给它一个宽度，并对齐文本

#chart-legend {
width: 250px;
padding: 10px;
border: black 1px solid;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.legend-value {
margin-bottom: 15px;
}
.legend-block {
width: 40px;
height: 20px;
float: left;
margin-right: 10px;
border: #bbb solid 1px;
background-color: #D3D3D3;
}
.remove-btn {
float: left;
height: 20px;
margin-right: 10px;
}
.text-block {
display:block;
text-align:right;
width:25vw;
}

HTML，我把你的文本放在一个div中

<div id="chart-legend" class="panel-body">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(75, 178, 197);">   </div>
<div class="text-block">hello</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(234, 162, 40);"></div>
<div class="text-block">I'm too long so I go where I should not hehe I'm shuch a bad legend</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(197, 180, 127);"> </div>
<div class="text-block">It's a trap cause I'm too short</div>
</div>


你好
我太长了，所以我去了我不该去的地方呵呵，我是一个糟糕的传奇
这是个陷阱，因为我太矮了
这是很多额外的工作，但这就是你的意思吗？可以按任何方式更改垂直对齐

HTML:

flexbox是一个选项吗？看到了吗？对齐方式和文本对我来说很好，但是为什么一些“图例块”变短了？我已经更新了。为了解决这个问题，我将
图例块的
宽度
更改为
最小宽度
，您让这看起来很简单：p需要阅读更多关于flexbox的内容。这里出现的第一个图例与其他图例略有偏移，这是怎么回事？我不知道我是否会使用flexbox来解决这样的简单问题。我有点想象flexbox在一个应用程序上下文中，我认为纯css是有效的，并且在IE8中也可以工作。你怎么看？@YannChabot我通常尝试并支持前瞻性思维方法，并尽可能使用flexbox，因为我相信它将成为未来的标准。Flexbox更易于配置，代码更少，更易于维护。Flexbox已经有了不错的支持（92.97%的支持率-请参阅），如果我的项目需要IE8支持，我仍然可以使用下面提到的
display:table cell
方法，在使用Flexbox的地方使用IE条件语句加载CSS覆盖。@Kinburn101第一个
渲染的长度超过
最小宽度：40px，而另外两个不是，所以它们是40px，第一个是43px或其他。要解决这个问题，您可以添加
width:40px沿
最小宽度：40px并且它将不再被偏移。在现实世界中，我肯定他不会破坏img的存在。@zgood Nice！只是不确定在使用flexbox时是否经常发生这种情况。
<div id="chart-legend" class="panel-body">
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(75, 178, 197);">   </div>
<div class="text-block">hello</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(234, 162, 40);"></div>
<div class="text-block">I'm too long so I go where I should not hehe I'm shuch a bad legend</div>
</div>
<div class="legend-value">
<img class="remove-btn" src="/images/remove.png" alt="rmv" />
<div class="legend-block" style="background-color: rgb(197, 180, 127);"> </div>
<div class="text-block">It's a trap cause I'm too short</div>
</div>

<div id="chart-legend" class="panel-body">
<div class="legend-item">
    <div class="legend-value">
        <img class="remove-btn" src="/images/remove.png" alt="rmv" />
    </div>
    <div class="legend-block">
        <div class="block" style="background-color: rgb(75, 178, 197);">    </div>
    </div>
    <div class="legend-text">hello</div>
</div>
<div class="legend-item">
    <div class="legend-value">
        <img class="remove-btn" src="/images/remove.png" alt="rmv" />
    </div>
    <div class="legend-block">
        <div class="block" style="background-color: rgb(234, 162, 40);">    </div>
    </div>
    <div class="legend-text">I'm too long so I go where I should not hehe I'm shuch a bad legend</div>
</div>
<div class="legend-item">
    <div class="legend-value">
        <img class="remove-btn" src="/images/remove.png" alt="rmv" />
    </div>
    <div class="legend-block">
        <div class="block" style="background-color: rgb(197, 180, 127);">    </div>
    </div>
    <div class="legend-text">It's a trap cause I'm too short</div>
</div>
</div>

#chart-legend {
width:200px;
padding:10px;
border:black 1px solid;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.legend-item {
display:table;
margin-bottom:10px;
}
.legend-value {
width:55px;
display:table-cell;
margin-bottom:15px;
vertical-align:top;
}
.legend-text {
display:table-cell;
vertical-align:top;
}
.block {
height:20px;
width:40px;
border:#bbb solid 1px;
}
.legend-block {
width:55px;
display:table-cell;
vertical-align:top;
} 
.remove-btn {
float:left;
height:20px;
margin-right:10px;
}