выровнять центр два элемента разной ширины

Question

Как сделать два элемента выровненными так, чтобы они находились на таком же расстоянии от линии в центре, которая должна быть в центре обертки. Также ширина обертки не является фиксированной и может меняться. http://jsfiddle.net/x2b2ax37/2/

<div id="block"> 
<div id="wrapper"> 
    <span id="div1">2222</span> 
    <span id="div2">2 %</span> 
</div> 
<div id="wrapper"> 
    <span id="div1">11</span> 
    <span id="div2">100 %</span> 
</div> 
<div id="wrapper"> 
    <span id="div1">21</span> 
    <span id="div2">0 %</span> 
</div> 
</div> 

1 - Начальный 2 - Что я ожидаю

Answer 1

Вы можете достичь его, как это:

(Обновлено с .class эс вместо #ID с)

JSFiddle - DEMO

.wrapper { 
 
    position: relative; 
 
} 
 
.div1 { 
 
    border: 1px solid #F00; 
 
    right: 50%; 
 
    position: absolute; 
 
} 
 
.div2 { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    left: 50%; 
 
    display: inline-block; 
 
} 
 
.block { 
 
    border: 1px solid green; 
 
    width: 200px; 
 
}

<div class="block"> 
 
    <div class="wrapper"> 
 
     <span class="div1">2222</span> 
 
     <span class="div2">2 %</span> 
 
    </div> 
 
    <div class="wrapper"> 
 
     <span class="div1">11</span> 
 
     <span class="div2">100 %</span> 
 
    </div> 
 
    <div class="wrapper"> 
 
     <span class="div1">21</span> 
 
     <span class="div2">0 %</span> 
 
    </div> 
 
</div>

Answer 2

Хитрость, как было показано ранее Мэри Мелоди является использование комбинации абсолютного и относительного позиционирования на ребенка span элементы, .div1 и .div2.

Чтобы убедиться, что верхняя и нижняя границы краев точно совпадают, примените display: inline-block к дочерним элементам span.

Хитрость заключается в том, чтобы держать .div2 в потоке с левым краем 50%, что обеспечивает пространство для .div1, который будет абсолютно позиционируется с помощью right: 50%.

Для контроля расстояния между двумя span «с, добавьте 1px правого края, чтобы .div1 и сохранить симметрии, используйте left: 1px на .div2.

.wrapper { 
 
    position: relative; 
 
    border: 1px dashed blue; 
 
    margin-bottom: 10px; 
 
} 
 
.div1, .div2 { 
 
    border: 1px dotted blue; 
 
    display: inline-block; 
 
} 
 
.div1 { 
 
    position: absolute; 
 
    right: 50%; 
 
    margin-right: 1px; 
 
} 
 
.div2 { 
 
    position: relative; 
 
    margin-left: 50%; 
 
    left: 1px; 
 
}

<div class="block"> 
 
    <div class="wrapper"> 
 
    <span class="div1">2222</span> 
 
    <span class="div2">2 %</span> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <span class="div1">11</span> 
 
    <span class="div2">100 %</span> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <span class="div1">21</span> 
 
    <span class="div2">0 %</span> 
 
    </div> 
 
</div>

Answer 3

Просто нужно сделать Div1 и div2 встраивать блоки и установить ширину для них, а также выравнивания текста в различных мировоззрений.

Simple example

#div1 { 
    border: 1px solid red; 
    display:inline-block; 
    width: 50px; 
    text-align:right; 
} 

Answer 4

я не советую использовать идентификатор, и может использовать классы, так как и не могут повторить те же идентификаторы каждый раз, ниже код обновляется, и как хорошо жить демо.

.wrapper_block{ 
 
    text-align: center; 
 
} 
 
.wrapper_container span{ 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.wrapper_container span span{ 
 
    display: block;  
 
} 
 
.wrapper_left{ 
 
    text-align: right; 
 
} 
 
.wrapper_right{ 
 
    text-align: left; 
 
} 
 
.wrapper_left span{ 
 
    border: 1px solid red; 
 
    margin-bottom: -1px; 
 
} 
 
.wrapper_right span{ 
 
    border: 1px solid black; 
 
    margin-bottom: -1px; 
 
}

<div class="wrapper_block"> 
 
    <div class="wrapper_container"> 
 
     <span class="wrapper_left"> 
 
      <span>2222</span> 
 
      <span>11</span> 
 
      <span>21</span> 
 
     </span> 
 
     
 
     <span class="wrapper_right"> 
 
      <span>2 %</span> 
 
      <span>100 %</span> 
 
      <span>0 %</span> 
 
     </span> 
 
    </div> 
 
</div>