I have a span with fixed width and height, but the length of the text inside it is not fixed, which can be either a single word or very long. How can I always vertically align the text to the middle of the span? For example, in my http://jsfiddle.net/w2cfkocv/1/ , the second span only contains 1 word, but I want it to align in the middle of the span vertically. Thanks.
<table summary="dialogTitle" class="pageTitle">
<tr>
<td style="">
<span id="headertitle"> title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title </span><br>
<span id="headertitle"> title </span>
</td>
</tr>
#headertitle {
border: 1px solid #000;
font-size:14px;
color:#000000;
font-weight:bold;
width:200px;
height:100px;
line-height: 25px;
display:inline-block;
overflow:hidden;
float: left;
word-wrap: break-word;
vertical-align: middle;
}
First don't use duplicate ID's(#) , and then change your display:inline-block
to display:table-cell
here is a snippet:
.headertitle { border: 1px solid #000; font-size: 14px; color: #000000; font-weight: bold; width: 200px; height: 100px; line-height: 25px; display: table-cell; word-wrap: break-word; vertical-align: middle; }
<table summary="dialogTitle" class="pageTitle"> <tr> <td style=""> <span class="headertitle"> title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title </span> <span class="headertitle"> title </span> </td> </tr> </table>
This is the result:
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.