Aligning Text On A Specific Character

June 27, 2023 Post a Comment

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 hyphen? When w

Solution 1:

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-wwspan {
    display:inline-block;
    width:100px;
    text-align:left;
}
.progress-wwspan:first-of-type {
    text-align:right
}

<section><divclass="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>

UPDATED VERSION USING FLEX

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-wwdiv {
  display: flex;
}

.progress-wwdivspan {
  flex: 1;
}

.progress-wwdivspan:first-of-type {
  text-align: right;
  padding-right: 5px;
}

.progress-wwdivspan:last-of-type {
  padding-left: 5px;
}

<section><divclass="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>

Solution 2:

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><divclass="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;
}
    ulli{
        width:100%;
        position: relative;
    }
        ullispan{
            position: absolute;
            right:0;
            left:50%;
            text-align:left;
            padding-left:5px;
            display:inline-block;
        }
        ullispan: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

Solution 3:

as I suggested in other answer , this could use the <dl> tags if semantics matters :

<divclass="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:05px00;
}
dt {text-align:right;}
dd {text-align:left;}
dt:after {content:' -';}

DEMO

Solution 4:

Demo fiddle

If you want to use some jQuery (for example, if you cant change your HTML), another alternative may be:

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

.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%;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><divclass="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>

Solution 5:

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:

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

Learn Html5