2015-05-29 26 views
5

ho un <div> che contiene due span. Uno con un testo (più lungo) e uno con un'icona. Il testo deve essere avvolto (usando i trattini) e l'icona deve essere allineata verticalmente.verticalmente allineare Hyphend testo e delle icone

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

il codice HTML risultante dovrebbe assomigliare

Donaudampfschiff- 
fahrtsgesellschafts (icon here) 
kapitän 

risposta

0

ecco la soluzione:

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/

+0

non funziona - il PO richiede parole più lunghe per essere spezzato, utilizzando trattini: http://jsfiddle.net/bupr4c2k/1/ – Paul

+0

Unforunately questo non lo fa lavoro nel nostro caso poiché il diff esterno è in realtà un tavolo. aggiorno la domanda di conseguenza –

+0

@ChristianDietrich, la tabella è l'unico problema nella mia soluzione? – LeoAref

0

<!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; 
 
\t \t -moz-hyphens: manual; 
 
\t \t -ms-hyphens: manual; 
 
\t \t -o-hyphens: manual; 
 
\t \t hyphens: manual; 
 
    } 
 
\t .icon { 
 
\t \t position:absolute; 
 
\t \t margin-left: 50px; 
 
\t \t top: 25px; 
 
\t } 
 
\t .my-text{ 
 
\t \t -webkit-hyphens: manual ; 
 
\t \t -moz-hyphens: manual ; 
 
\t \t -ms-hyphens: manual ; 
 
\t \t -o-hyphens: manual ; 
 
\t \t hyphens: manual ; 
 
\t } 
 
    </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> 
 
\t 
 
\t <div style="width:170px;"> 
 
    \t <span class="my-text">Donaudampfschiff&shy;fahrtsgesellschafts<img title="Icon" src="AufsteigendSortieren_d9d9d9.png">&shy;kapitän</span> 
 
\t </div> 
 
</body> 
 
</html>

+0

in realtà voglio usare i trattini automatici. questo funziona finché la cosa non è un inline-block –

+0

Beh, se ho messo trattini per l'auto non separa le parole correttamente come si desidera, si può provare voi stessi nell'esempio sopra. – Tachi

+0

nel mio primo post ho perso l'attributo lang. se lo aggiungi, funziona in firefox. –

Problemi correlati