Css 当文本换行时，如何将此图像保持在浮动div中垂直居中？

我做了一些研究，想知道如何在包装后保持文本与红色框（将替换为图标）对齐

但是现在由于浮动，图标被提升到容器的顶部

。不幸的是，在链接换行到两行之后，我现在一直在研究如何将

div.imgwrap

垂直居中于其父级

是否可以只使用CSS，而不必修改HTML？显而易见的解决方案是只为图标添加一个额外的列，但这将需要更多的工作

---

这就是你要找的吗

表格，
tr，
运输署{
边框：实心1px黑色；
填充：1em；
文本对齐：左对齐；
垂直对齐：中间对齐；
线高：1.125rem；
字体大小：0.875rem；
字体系列：无衬线；
/*增加*/
位置：相对位置；
}
伊姆格拉普先生{
垂直对齐：中间对齐；
/*显示：内联块；已删除*/
右边距：8px；
/*浮动：左；已删除*/
/*增加*/
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
.imgwrap+a{
垂直对齐：中间对齐；
显示：块；
左边距：24px；
}
.imgwrap img{
显示：块；
}
a{
文字装饰：无；
}

小柱
小柱
中型柱

这就是你要找的吗

表格，
tr，
运输署{
边框：实心1px黑色；
填充：1em；
文本对齐：左对齐；
垂直对齐：中间对齐；
线高：1.125rem；
字体大小：0.875rem；
字体系列：无衬线；
/*增加*/
位置：相对位置；
}
伊姆格拉普先生{
垂直对齐：中间对齐；
/*显示：内联块；已删除*/
右边距：8px；
/*浮动：左；已删除*/
/*增加*/
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
.imgwrap+a{
垂直对齐：中间对齐；
显示：块；
左边距：24px；
}
.imgwrap img{
显示：块；
}
a{
文字装饰：无；
}

小柱
小柱
中型柱

这就是你想要的吗？

Css

td {
  position: relative;
  border: solid 1px black;
  padding: 1em;
  text-align: left;
  vertical-align: middle;
  line-height: 1.125rem;
  font-size: 0.875rem;
  font-family: sans-serif;
}

.imgwrap {
  position: absolute;
  top: 50%;
  margin-top: -8px; /* half of #imgwrap's height */

  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
  float: left;
}

这就是你想要的吗？

Css

td {
  position: relative;
  border: solid 1px black;
  padding: 1em;
  text-align: left;
  vertical-align: middle;
  line-height: 1.125rem;
  font-size: 0.875rem;
  font-family: sans-serif;
}

.imgwrap {
  position: absolute;
  top: 50%;
  margin-top: -8px; /* half of #imgwrap's height */

  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
  float: left;
}

.imgwrap{
显示：网格；
对齐项目：居中；
网格模板列：自动1fr；
右边距：8px；
}

小柱
小柱
中型柱

.imgwrap{
显示：网格；
对齐项目：居中；
网格模板列：自动1fr；
右边距：8px；
}

小柱
小柱
中型柱

试试这个CSS

td{position:relative；}

和

和

我希望它居中，而不管父div的高度如何。如果高度发生变化，绝对定位不会使它居中。如果高度发生变化，绝对定位不会使它居中：不总是。您可以将其转换为将alwasy保持在中心尝试此CSS

td{position:relative；}

和

.imgwrap{position:absolute；top:25px；}

无论父分区的高度如何，我都希望它居中。如果高度发生变化，绝对定位将不会使其居中。如果高度发生变化，绝对定位将不会使其居中：不总是。你可以将其转换为保持alwasy在中心位置是的！非常感谢。我有一个问题——如果我在td上没有相对位置，它怎么会不起作用？这难道不应该改变td本身的位置吗？如果你有绝对子元素，你需要定义一个父元素来相对。在您的问题中，.imgwrap希望位于td的50%垂直线上，因此.imgwrap的父元素是td。此外，.imgwrap的x/y轴位于左上角，您需要向后推半高。imgwrap将完全居中。更多信息：是的！非常感谢。我有一个问题——如果我在td上没有相对位置，它怎么会不起作用？这难道不应该改变td本身的位置吗？如果你有绝对子元素，你需要定义一个父元素来相对。在您的问题中，.imgwrap希望位于td的50%垂直线上，因此.imgwrap的父元素是td。此外，.imgwrap的x/y轴位于左上角，您需要向后推半高。imgwrap将完全居中。更多信息：

td {
  position: relative;
  border: solid 1px black;
  padding: 1em;
  text-align: left;
  vertical-align: middle;
  line-height: 1.125rem;
  font-size: 0.875rem;
  font-family: sans-serif;
}

.imgwrap {
  position: absolute;
  top: 50%;
  margin-top: -8px; /* half of #imgwrap's height */

  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
  float: left;
}