Html 将CSS内容图标与包装文本垂直对齐

我需要重新格式化预定义的HTML，以使用CSS提供不同的布局。HTML作为错误消息从服务器返回，因此我无法更改格式

。服务器错误{
列表样式：无；
}
.服务器错误李：以前{
内容：“D”；
字体系列：“皮克托”；
}

此处显示服务器错误消息。

您可以使用css3 flexbox

.server-errors li {
  align-items: center;
  display: flex;
}

输出图像：

。服务器错误{
边框：1px纯黑；
列表样式：无；
填充：10px；
宽度：150px；
}
.服务器错误li{
对齐项目：居中；
显示器：flex；
}
.服务器错误李：以前{
右边距：10px；
内容：“D”；
字体系列：“皮克托”；
}

长的错误消息会出现-
-这里是X，它将跨越-
-三行

您可以使用css3 flexbox

.server-errors li {
  align-items: center;
  display: flex;
}

输出图像：

。服务器错误{
边框：1px纯黑；
列表样式：无；
填充：10px；
宽度：150px；
}
.服务器错误li{
对齐项目：居中；
显示器：flex；
}
.服务器错误李：以前{
右边距：10px；
内容：“D”；
字体系列：“皮克托”；
}

长的错误消息会出现-
-这里是X，它将跨越-
-三行

您可以使用flexbox：

.server-errors li {
  display: flex;
  align-items: center;
}

或者，具有更多浏览器支持的css表格单元格：

.server-errors li:before,
.server-errors li label {
  display: table-cell;
  vertical-align: middle;
}

---

您可以使用flexbox：

.server-errors li {
  display: flex;
  align-items: center;
}

或者，具有更多浏览器支持的css表格单元格：

.server-errors li:before,
.server-errors li label {
  display: table-cell;
  vertical-align: middle;
}

。全部{
宽度：300px；
显示器：flex；
}
李{
列表样式：无；
}
.这边{
宽度：10px；
}
.信{
宽度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.所有*{
线高：30px；
}
.留言{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

-
-
-
X
这里有一条很长的错误消息，它将跨越三行
-
-
-

。全部{
宽度：300px；
显示器：flex；
}
李{
列表样式：无；
}
.这边{
宽度：10px；
}
.信{
宽度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.所有*{
线高：30px；
}
.留言{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

-
-
-
X
这里有一条很长的错误消息，它将跨越三行
-
-
-

你试过填充吗？你试过填充吗？这不起作用。你在这里更改HTML，我不能这样做。我从服务器上收到了以HTML片段形式发送给我的错误消息。很抱歉，如果不更改HTML，您将不会在左侧显示破折号并写入。因为顶部和底部可以使用边框虚线样式，但左侧和书写不能。其他答案正确吗？这不起作用。你在这里更改HTML，我不能这样做。我从服务器上收到了以HTML片段形式发送给我的错误消息。很抱歉，如果不更改HTML，您将不会在左侧显示破折号并写入。因为顶部和底部可以是虚线样式，但左侧和书写不能。其他答案正确吗？这正是我需要的。在标签上添加一个填充物，使空间更大，这正是我所需要的。在标签上添加一个填充以增加空间，效果非常好。标签填充有助于布局，但没有想到这一点。@user281921是的，flexbox或表格单元格处理的高度相等。标签填充有助于布局，但没有想到这一点。@user281921是的，flexbox或表格单元格处理的高度相等。