CODEWITHSUNDEEP
css
Nikita
Nikita

Reputation: 325

align center two elements different width

How to make two elements aligned so they will be at same distance from line in center which should be in center of wrapper. Also wrapper width is not fixed and may change. 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>

enter image description here

1 - Initial 2 - What I expect

Upvotes: 3

Views: 967

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

The trick as shown earlier by Mary Melody is to use a combination of absolute and relative positioning on the child span elements, .div1 and .div2.

To make sure that the top and bottom border edges line up exactly, apply display: inline-block to the span child elements.

The trick is to keep .div2 in the flow with a 50% left margin, which provides space for .div1, which will be absolutely positioned using right: 50%.

To control the spacing between the two span's, add a 1px right-margin to .div1 and to preserve symmetry, use left: 1px on .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>

Upvotes: 2

Anonymous
Anonymous

Reputation: 10216

You could achieve it like this:

(Updated with .classes instead of #IDs)

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>

Upvotes: 3

Shems Eddine
Shems Eddine

Reputation: 141

Just need to make the div1 and div2 to inline blocks and set a width for them and also text-align to the different alignments.

Simple example 

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

Upvotes: 0

aaa
aaa

Reputation: 546

i do not advise to use id, u can use classes because u can not repeat the same ids each time, below is the code updated and as well a live demo.

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

Upvotes: 0

Related Questions