Html 垂直对齐连字符文本和图标_Html_Css_Internet Explorer 11

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

html css

Html 垂直对齐连字符文本和图标,html,css,internet-explorer-11,Html,Css,Internet Explorer 11,我有一个包含两个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"> <

我有一个

包含两个

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

jsidle:


.文本{
webkit连字符：手动；
-moz连字符：手动；
-ms连字符：手动；
-o-连字符：手动；
连字符：手动；
}
.图标{
位置：绝对位置；
左边距：50像素；
顶部：25px；
}
.我的文本{
-webkit连字符：手动；
-moz连字符：手动；
-ms连字符：手动；
-o-连字符：手动；
连字符：手动；
}
多纳达姆普斯奇夫&害羞；fahrtsgesellschafts；卡皮坦
多纳达姆普斯奇夫&害羞；fahrtsgesellschafts；卡皮坦

不起作用-OP需要使用连字符打断较长的单词：不幸的是，在我们的例子中，这不起作用，因为外部差异实际上是一个表。我更新问题accordingly@ChristianDietrich，表格是我解决方案中唯一的问题？我不知道它是否都适合我，我真的想使用自动连字符。如果我把连字符设置为auto，它就不能按照你想要的那样正确地分隔单词，你可以在上面的例子中自己尝试。在我的第一篇文章中，我忽略了lang属性。如果你加上这个，它可以在firefox中使用。但它不适合我，所以我不得不保留手动分隔符。无论如何，添加了第二个variant.hmmm，不幸的是我不知道图像的大小。此外，如果有两个列，则这不起作用

Donaudampfschiff-
fahrtsgesellschafts   (icon here)
kapitän

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

.container {
    display: table;
}

.container .text {
    display: inline-block;
    max-width: 100px;
}

.container .icon {
    display: table-cell;
    vertical-align: middle;
    margin-right: 15px;
}