Ausrichten von Text auf einem bestimmten Zeichen

Question

Ich habe diese Liste von Wörtern, die ich in der Mitte ausrichten möchte, jeder Listeneintrag besteht aus zwei Wörtern, die durch ein '-' (Bindestrich) getrennt sind. Gibt es einen einfachen Weg, den Punkt am Bindestrich auszurichten? Wenn die Wörter jetzt unterschiedlich lang sind, ist der Bindestrich nicht mehr in der Mitte.

Ich habe eine Geige gemacht zu meinem Problem deutlich zu machen: http://jsfiddle.net/seLvC/

meine aktuellen Code:

.progress-ww { 
    font-size: 0.8rem; 
    line-height:0.8rem; 
    text-align:center; 
} 

<section> 
    <div class="progress-ww"> 
     <div> 
      <div>lopen - ik loop</div> 
      <div>klimmen - ik klim</div> 
      <div>geven - ik geef</div> 
      <div>schreeuwen - ik schreeuw</div> 
      <div>blozen - ik bloos</div> 
     </div> 
    </div> 
</section> 

Answer 1

Eine Möglichkeit, dies zu erreichen, ist spans um die Wörter auf der linken und rechten Seite des Bindestrichs zu platzieren. Dann können Sie ihnen eine Mindestbreite hinzufügen, um sie gleich breit zu machen, wodurch der Bindestrich in die Mitte gesetzt wird.

Fiddle

.progress-ww { 
 
    font-size: 0.8rem; 
 
    line-height:0.8rem; 
 
    text-align:center; 
 

 

 
} 
 
.progress-ww span { 
 
    display:inline-block; 
 
    width:100px; 
 
    text-align:left; 
 
} 
 
.progress-ww span:first-of-type { 
 
    text-align:right 
 
}

<section> 
 
    <div class="progress-ww"> 
 
     <div> 
 
      <div><span>lopen</span> - <span>ik loop</span></div> 
 
      <div><span>klimmen</span> - <span>ik klim</span></div> 
 
      <div><span>geven</span> - <span>ik geef</span></div> 
 
      <div><span>schreeuwen</span> - <span>ik schreeuw</span></div> 
 
      <div><span>blozen</span> - <span>ik bloos</span></div> 
 
     </div> 
 
    </div> 
 
</section>

Answer 2

Sie Ihren Text in einem inline-block boxe wickeln konnte und eine width gesetzt, zurückgesetzt text-align und geben Sie ein negatives margin, um praktisch seine Größe auf Null zu reduzieren: http://jsfiddle.net/seLvC/2/

.progress-ww { 
    font-size: 0.8rem; 
    line-height:0.8rem; 
    text-align:center; 
} 
.progress-ww span { 
    display:inline-block; 
    width:100px;/* give it a width */ 
    margin:0 -100px 0 0;/* 0 space needed on right side */ 
    text-align:left; 
} 
.progress-ww span:first-of-type { 
    margin:0 0 0 -100px;/* 0 space needed on left side */ 
    text-align:right 
} 

Dies würde verdient innerhalb <dl><dt><dd> Liste markiert werden, da es zu einem Dictionnary ähnlich ist. :)

Answer 3

im vorausgesetzt, Sie in der Verwendung, die HTML-Struktur gesperrt Arent. als solche würde ich nicht nur Listenelemente verwenden, um diese Serie von Elementen anzuzeigen, aber ich würde auch jeden Abschnitt von ihnen in span Tags umhüllen. Die Vergünstigung zu dieser Lösung sind Sie nicht in beliebige Breiten für die linken und rechten Abschnitte gesperrt (Sie müssen nur über die Breite des Bindestrich Sorge)

js Geige: http://jsfiddle.net/seLvC/8/

HTML

<section> 
    <div class="progress-ww"> 
     <ul> 
      <li> 
       <span>lopen</span> 
       - 
       <span>ik loop</span> 
      </li> 
      <li> 
       <span>klimmen</span> 
       - 
       <span>ik klim</span> 
      </li> 
      <li> 
       <span>geven</span> 
       - 
       <span>ik geef</span> 
      </li> 
      <li> 
       <span>schreeuwen</span> 
       - 
       <span>ik schreeuw</span> 
      </li> 
      <li> 
       <span>blozen</span> 
       - 
       <span>ik bloos</span> 
      </li> 
     </ul> 
    </div> 
</section> 

CSS

*, 
*:before, 
*:after{ 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
} 
.progress-ww { 
    font-size: 0.8rem; 
    line-height:0.8rem; 
    text-align:center; 
} 
ul{ 
    list-style-type:none; 
} 
    ul li{ 
     width:100%; 
     position: relative; 
    } 
     ul li span{ 
      position: absolute; 
      right:0; 
      left:50%; 
      text-align:left; 
      padding-left:5px; 
      display:inline-block; 
     } 
     ul li span:first-child{ 
      position: absolute; 
      left:0; 
      right:50%; 
      text-align:right; 
      padding-right:5px; 
      display:inline-block; 
     } 
.hyphen{ 
    display:inline-block; 
    width:10px; 
} 

EDIT: entfernt Bindestrich Klasse und angepasst CSS um IE8 Kompatibilität - dank GCyrillus für den Vorschlag

Answer 4

Nicht sehr sauber .. aber eine Lösung dennoch: http://jsfiddle.net/seLvC/5/.

CSS

.progress-ww { 
    font-size: 0.8rem; 
    line-height:0.8rem; 
    text-align:center; 
} 

.hyp { 
    position:relative; 
} 
.first, .second { 
    position:absolute; 
    top:0;  
} 
.first { 
    right:18%;  
    padding-right:35%; 
} 
.second { 
    left:18%;  
    padding-left:35%; 
} 

leid, aber ich änderte Ihre HTML:

<div class="hyp"> 
     - 
     <div class="first">ik loop </div> 
     <div class="second">lopen</div> 
     </div> 
     <div class="hyp"> 
     - 
     <div class="first">klimmen </div> 
     <div class="second">ik klim</div> 
     </div> 
     <div class="hyp"> 
     - 
     <div class="first">geven </div> 
     <div class="second">ik geef</div> 
     </div> 
     <div class="hyp"> 
     - 
     <div class="first">schreeuwen</div> 
     <div class="second">ik schreeuw</div> 
     </div> 
     <div class="hyp"> 
     - 
     <div class="first">blozen </div> 
     <div class="second">ik bloos</div> 
     </div> 



     </div> 

Answer 5

Demo fiddle

Wenn Sie einige jQuery (zum Beispiel, wenn Sie Ihre HTML nicht ändern können) verwendet werden soll, kann eine andere Alternative:

HTML

<div class="progress-ww"> 
    <div>lopen - ik loop</div> 
    <div>klimmen - ik klim</div> 
    <div>geven - ik geef</div> 
    <div>schreeuwen - ik schreeuw</div> 
    <div>blozen - ik bloos</div> 
</div> 

CSS

.progress-ww { 
    font-size: 0.8rem; 
    line-height:0.8rem; 
    text-align:center; 
} 
.left { 
    text-align:left; 
} 
.right { 
    text-align:right; 
} 
.right:after { 
    content:' -'; 
    margin-right:5px; 
} 
.left, .right { 
    display:inline-block; 
    width:50%; 
} 

jQuery

$('.progress-ww div').each(function() { 
    var part = $(this).text().split(' - ') 
    $(this).replaceWith("<div class='right'>" + part[0] + "</div><div class='left'>" + part[1] + "</div>"); 
}); 

Answer 6

wie ich in anderer Antwort schlug, könnte dies die <dl> Tags verwenden, wenn seman Tics Angelegenheiten:

<div class="progress-ww"> 
    <dl> 
    <dt>lopen</dt><dd>ik loop<br/>zij lopen</dd> 
    <dt>klimmen</dt><dd>ik klim</dd> 
    <dt>geven</dt><dd>ik geef</dd> 
    <dt>schreeuwen</dt><dd>ik schreeuw</dd> 
    <dt>blozen</dt><dd>ik bloos<br/>je bloos<br/>hij bloss</dd> 
    </dil> 
</div> 

mit css

.progress-ww { 
    text-align:center; 
    width:260px; 
    /* margin : auto ; maybe ? */ 

} 
dt , dd { 
    width:100px; 
    display:inline-block; 
    vertical-align:top; 
    margin:0; 
    padding:0 5px 0 0; 
} 
dt {text-align:right;} 
dd {text-align:left;} 
dt:after {content:' -';} 

DEMO

Answer 7

Nein, es gibt keine einfache Möglichkeit, zu einem bestimmten Zeichen auszurichten, und in der Tat keine Möglichkeit, mit dem angegebenen HTML-Markup

Das Markup wird am besten in eine Tabelle geändert, da dies die zuverlässigste Methode ist, um das gewünschte Aussehen zu erzielen (auch wenn CSS deaktiviert ist). Es ist auch der logischste Ansatz, da die Daten strukturell eine Tabelle von Entsprechungen sind. Die Verwendung von dl wäre nicht falsch, wenn wir das HTML5-Prinzip dl als Beschreibungsliste übernehmen (nicht als Definitionsliste, wie ursprünglich definiert). Aber es bietet keine besonderen Vorteile und verursacht einige Komplikationen.

Beispiel:

<table class="progress-ww"> 
    <tr> <td>lopen <td>- ik loop 
    <tr> <td>klimmen <td>- ik klim 
    <tr> <td>geven <td>- ik geef< 
    <tr> <td>schreeuwen <td>- ik schreeuw> 
    <tr> <td>blozen <td>- ik bloos 
</table> 

Sie können dann die Tabelle leicht wie gewünscht stylen. Ich bin mir nicht sicher, welche Art von Zentrierung gewünscht wird, aber Sie können die Tabelle als Ganzes zentrieren (z. B. in CSS mit table {margin: 0 auto}), oder Sie können die erste Spalte rechts ausrichten (td:first-child { text-align: right }).

Das Markup wäre noch logischer ohne die Bindestriche im Inhalt. Du könntest sie weglassen und sie in CSS mit dem :before Pseudo-Element erzeugen, wenn dir das besser gefällt.

(Ich würde hier keinen Bindestrich "-" verwenden; menschliche Sprachen verwenden normalerweise keine Bindestriche auf diese Weise. Ich würde einen Bindestrich "-" oder vielleicht einen Doppelpunkt ":" verwenden, der oft zum Trennen verwendet wird Wortformen in einem Paradigma.)