垂直將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.