I have this list of words i want to align on the center, every list item consists of two words divided by a \'-\'(hyphen). Is there an easy way i can align spot on the hyphe
One way of achiveing this is to place spans
around the words on the left and right side of the hyphen.
Then you can add a min-width to these to make them equal width which will put the hyphen in the center.
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>
Below is an updated version for this solution using flex. This solution means you don't have to set any fixed witdths on the spans.
.progress-ww div {
display: flex;
}
.progress-ww div span {
flex: 1;
}
.progress-ww div span:first-of-type {
text-align: right;
padding-right: 5px;
}
.progress-ww div span:last-of-type {
padding-left: 5px;
}
<section>
<div class="progress-ww">
<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>
</section>
Not very clean.. but a solution nevertheless: 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%;
}
sorry but I changed your 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>
im assuming you arent locked into using that html structure. as such i would not only use list items to display this series of items, but i would also wrap each section of them in span
tags. The perk to this solution is you are not locked into arbitrary widths for the left and right sections (you just have to worry about the width of the hyphen)
js fiddle: 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: removed hyphen class and adjusted css order for IE8 compatibility - thanks to GCyrillus for the suggestion
No, there is no easy way to align to a specific character, and in fact no way with the given HTML markup.
The markup is best changed to a table, because that’s by far the most reliable way of achieving the desired appearance (even when CSS is off). It’s also the most logical approach, since the data is structurally a table of correspondences. Using dl
would not be wrong if we adopt the HTML5 principle of dl
as description list (not as definition list, as originally defined). But it offers no special benefits and causes some complications.
Example:
<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>
You can then easily style the table as desired. I’m not sure what kind of centering is desired, but you can center the table as a whole (e.g., in CSS with table {margin: 0 auto}
), or you can right-align the first column (td:first-child { text-align: right }
).
The markup would be even more logical without the hyphens in the content. You could omit them and generate them in CSS with the :before
pseudo-element, if this suits you better.
(I would not use a hyphen “-” here; human languages don’t normally use hyphens that way. I would use an en dash “–” or maybe a colon “:”, which is often used to separate word forms in a paradigm.)
as I suggested in other answer , this could use the <dl>
tags if semantics matters :
<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>
with 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
you could wrap your text in an inline-block
boxe and set a width
, reset text-align
and give a negative margin
to reduce virtually it's size to zero :
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
}
This would deserved to be tagged within <dl>
<dt>
<dd>
list , as it's similar to a dictionnary. :)