垂直将CSS内容图标与换行文字对齐
[英]Vertical align CSS content icon with wrapped text
问题描述
我需要重新格式化预定义的HTML，以便使用CSS为我提供不同的布局。 HTML是从服务器返回的错误消息，因此我无法更改格式。
.server-errors ul { list-style: none; } .server-errors li:before { content: "D"; font-family: "pictos"; }
<div class="server-errors"> <ul> <li> <label>Server error message goes here.</label> </li> </ul> </div>
要求通过删除<li>点并将其替换为另一个（垂直）左对齐的字符来显示此内容。
我设法显示了该字符，但无法将其作为一个单独的实体垂直对齐。
我需要：
---------------------------------------
- Long error message goes -
- X here and it will span -
- three lines -
---------------------------------------
我得到：
---------------------------------------
- X Long error message goes here and -
- will span three lines -
- -
---------------------------------------
我不确定应该确切地更改什么，甚至不确定要查看CSS的哪一部分才能获得效果。
3 个解决方案
解决方案1
1 已采纳 2017-01-25 15:00:33
您可以使用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>
解决方案2
1 2017-01-25 15:04:17
您可以使用flexbox：
.server-errors li {
display: flex;
align-items: center;
}
或者，具有更多浏览器支持的css table-cell：
.server-errors li:before,
.server-errors li label {
display: table-cell;
vertical-align: middle;
}
解决方案3
0 2017-01-25 15:20:39
.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>
LI中的CSS对齐图标和文本-垂直对齐以正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.