垂直对齐连字符文本和图标答案

【问题标题】：Vertically align Hyphend Text and Icon垂直对齐连字符文本和图标
【发布时间】：2015-05-29 20:03:37
【问题描述】：

我有一个<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

【问题讨论】：

标签： html css internet-explorer-11

【解决方案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/

【讨论】：

不起作用 - OP 需要使用连字符来分隔更长的单词：jsfiddle.net/bupr4c2k/1
不幸的是，这在我们的例子中不起作用，因为外部差异实际上是一个表。我相应地更新了问题
@ChristianDietrich，桌子是我解决方案中唯一的问题？
我不知道这是否适合

【解决方案2】：

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

【讨论】：

我实际上想使用自动连字符。只要东西不是内联块，这就是有效的
好吧，如果我将连字符设置为自动，它不会按照您的意愿正确分隔单词，您可以在上面的示例中自己尝试。
在我的第一篇文章中，我错过了 lang 属性。如果你添加它，它可以在 Firefox 中使用。
好吧，这对我不起作用，所以我不得不保留手动分隔符。无论如何，添加了第二个变体。
hmmm，不幸的是我不知道图像的大小。另外，如果有两列，这也不起作用