Question

我的<div>包含两个span。一个带有（更长）文本，一个带有图标。文本将换行（使用连字符），图标应垂直对齐。

<!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

Answer 1

以下是解决方案：

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/

Answer 2

＆＃13;

<!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&shy;fahrtsgesellschafts&shy;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&shy;fahrtsgesellschafts<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">&shy;kapitän</span>
	</div>
 </body>
</html>

＆＃13;

垂直对齐Hyphend文本和图标

2 个答案: