“内容：”中定义的图像应相对于其父对象居中

Question

我有社区（销售人员）页面，在该页面中，我无权访问DOM。我只能使用CSS来编辑样式以按照要求将其品牌化。

请考虑以下情况：

.selfServiceArticleLayout .warning, .warningDiv {
    border: 2px solid #DE3737;
    margin-bottom: 22px;
}

.note:before, .warning:before, .important:before, .tip:before {
    content: url(https://xxx/some_icon);
    width: 29px;
    position: absolute;
    left: 15px;
    top: unset;
    margin-top: 5px;
}

<p class="warning" data-aura-rendered-by="12:173;a"><span class="autonumber"><span><b>Note: </b></span></span> You must have at least one request type selected. You can select multiple request types. A quick brown fox, jumed over the lazy dogYou can select multiple request types. A quick brown fox, jumed over the lazy dogYou can select multiple request types. A quick brown fox, jumed over the lazy dogYou can select multiple request types. A quick brown fox, jumed over the lazy dog. </p>

结果

[检查小提琴]（[https://jsfiddle.net/8qexp03k/）

Answer 1

您可以尝试这样的事情

.wrapper {
  display: table;
}

.content {
  padding: 4px;
  border: 1px solid #333;
  display: table-cell; //this is important so it follows the rule below
  vertical-align: middle;
}

这可能是HTML（我添加了一个lorem ipsum，因此容器的高度有所增加，您可以检查第一个内容如何垂直对齐到中间）]

<div class="wrapper">
    <div class="content">X</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

UPDATE

您是否可以像这样更新图标渲染道具？

.note:before,
.warning:before,
.important:before,
.tip:before {
  //content: url(https://xxx/some_icon);
  width: 29px;
  position: absolute;
  left: 15px;
  top: unset;
  margin-top: 5px;
  background-image: url(https://xxx/some_icon); //use the icon as a background image
  background-position: center left; //then position it
}