Vertical align CSS content icon with wrapped text
Question
I need to reformat predefined HTML to give me a different layout using CSS. The HTML is returned from the server as an error message and as such I'm unable to change the format.
.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>
The requirement is to display this with removing the <li> dot and replacing it with another (pictos) character which is left and vertically aligned.
I have managed to display the character but am unable to align it vertically as a separate entity.
I need:
---------------------------------------
- Long error message goes -
- X here and it will span -
- three lines -
---------------------------------------
I get:
---------------------------------------
- X Long error message goes here and -
- will span three lines -
- -
---------------------------------------
I'm not sure what exactly I should be changing or even which part of the CSS to look at to get the effect.
3 answers
solution1
1 ACCPTED 2017-01-25 15:00:33
You can use css3 flexbox.
.server-errors li {
align-items: center;
display: flex;
}
Output Image:
.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>
solution2
1 2017-01-25 15:04:17
You can either use flexbox:
.server-errors li {
display: flex;
align-items: center;
}
Or, css table-cell with more browser support:
.server-errors li:before,
.server-errors li label {
display: table-cell;
vertical-align: middle;
}
solution3
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.