Question

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

＆＃13;

.server-errors ul {
  list-style: none;
}
.server-errors li:before {
  content: "D";
  font-family: "pictos";
}

＆＃13;

<div class="server-errors">
  <ul>
    <li>
      <label>Server error message goes here.</label>
    </li>
  </ul>
</div>

＆＃13;

要求显示此项，删除<li>点并将其替换为左侧和垂直对齐的另一个（pictos）字符。

我已设法显示该字符但无法将其垂直对齐为单独的实体。

我需要：

---------------------------------------
-         Long error message goes     -                                     
-    X    here and it will span       -
-         three lines                 -
---------------------------------------

我明白了：

---------------------------------------
- X Long error message goes here and  -                                     
-   will span three lines             -
-                                     -
---------------------------------------

我不知道究竟应该改变什么，甚至不知道要查看哪部分CSS才能获得效果。

Answer 1

您可以使用css3 flexbox。

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

输出图片：

.server-errors ul {
  border: 1px solid black;
  list-style: none;
  padding: 10px;
  width: 150px;
}
.server-errors li {
  align-items: center;
  display: flex;
}
.server-errors li:before {
  margin-right: 10px;
  content: "D";
  font-family: "pictos";
}

<div class="server-errors">
  <ul>
    <li>
      <label>Long error message goes     -                                     
        -    X    here and it will span       -
        -         three lines</label>
    </li>
  </ul>
</div>

Answer 2

您可以使用flexbox：

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

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

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

Answer 3

.all {
            width: 300px;
            display:flex;
        }
        li {
            list-style: none;
        }
        .side {
            width: 10px;
        }
        .letter {
            width: 100px;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .all * {
            line-height: 30px;
        }
        .message {
            display: flex;
            justify-content: center;
            align-items: center;
        }

<body>
    <div class="server-errors">
        <ul>
            <li>
                <div class="all">
                    <div class="side">
                        <span>-</span>
                        <span>-</span>
                        <span>-</span>
                    </div>
                    <div class="letter">
                        X
                    </div>
                    <div>
                        Long error message goes here and it will span three lines
                    </div>
                    <div class="side">
                        <span>-</span>
                        <span>-</span>
                        <span>-</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

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

3 个答案: