Aligning text on a specific character

前端 未结 7 518
一生所求
一生所求 2020-12-05 19:19

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

相关标签:
7条回答
  • 2020-12-05 19:45

    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>


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

    0 讨论(0)
  • 2020-12-05 19:46

    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>
    

    0 讨论(0)
  • 2020-12-05 19:49

    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

    0 讨论(0)
  • 2020-12-05 19:51

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

    0 讨论(0)
  • 2020-12-05 20:03

    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

    0 讨论(0)
  • 2020-12-05 20:04

    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
    }
    

    visual

    This would deserved to be tagged within <dl> <dt> <dd> list , as it's similar to a dictionnary. :)

    0 讨论(0)
提交回复
热议问题