垂直對齊Hyphend文本和圖標
[英]Vertically align Hyphend Text and Icon
問題描述
我有一個包含兩個span的<div> 。 一個帶有（更長）文本，一個帶有圖標。 文本將換行（使用連字符），圖標應垂直對齊。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta content="IE=Edge" http-equiv="X-UA-Compatible"/>
<style>
tr > th > span.text {
webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;
}
tr > th > span.icon {
float: right; vertical-align: middle;
}
</style>
</head>
<body>
<table width="200px" style="table-layout:fixed">
<tr>
<th>
<span class="text" lang="de">Donaudampfschifffahrtsgesellschaftskapitän</span>
<span class="icon">
<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">
</span>
</th>
<th>
<span class="text" lang="de">Donaudampfschifffahrtsgesellschaftskapitän</span>
<span class="icon">
<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">
</span>
</th>
<tr>
</table>
</body>
</html>
生成的html應該是這樣的
Donaudampfschiff-
fahrtsgesellschafts (icon here)
kapitän
2 個解決方案
解決方案1
0 2015-05-29 11:25:54
這是解決方案：
HTML
<div class="container">
<span class="text">Very very very very very long text.......</span>
<span class="icon"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt=""></span>
</div>
CSS
.container {
display: table;
}
.container .text {
display: inline-block;
max-width: 100px;
}
.container .icon {
display: table-cell;
vertical-align: middle;
margin-right: 15px;
}
JSFiddle： http ： //jsfiddle.net/LeoAref/4L126nps/
解決方案2
0 2015-05-29 11:43:11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta content="IE=Edge" http-equiv="X-UA-Compatible"/> <style> .text { webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; -o-hyphens: manual; hyphens: manual; } .icon { position:absolute; margin-left: 50px; top: 25px; } .my-text{ -webkit-hyphens: manual ; -moz-hyphens: manual ; -ms-hyphens: manual ; -o-hyphens: manual ; hyphens: manual ; } </style> </head> <body> <table style="width: 100px;"> <tr> <th> <span class="text" lang="de">Donaudampfschiff­fahrtsgesellschafts­kapitän</span> <span class="icon"> <img title="Icon" src="AufsteigendSortieren_d9d9d9.png"> </span> </th> <tr> </table> <div style="width:170px;"> <span class="my-text">Donaudampfschiff­fahrtsgesellschafts<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">­kapitän</span> </div> </body> </html>
如何使文字與圖標垂直對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.