Как разместить один элемент относительно другого с помощью CSS/jQuery

Question

Я перехожу к позиции title в следующем кодовом центре на circle.

<style> 
*, *:after, *:before { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: "Open Sans"; 
} 


/* Form Progress */ 
.progress { 
    width: 1500px; 
    margin: 20px auto; 
    text-align: center; 
} 
.progress .circle, 
.progress .bar { 
    display: inline-block; 
    background: #fff; 
    width: 40px; height: 40px; 
    border-radius: 40px; 
    border: 1px solid #d5d5da; 
} 
.progress .bar { 
    position: relative; 
    width: 100px; 
    height: 6px; 
    top: -33px; 
    margin-left: -5px; 
    margin-right: -5px; 
    border-left: none; 
    border-right: none; 
    border-radius: 0; 
} 
.progress .circle .label { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 
    line-height: 32px; 
    border-radius: 32px; 
    margin-top: 3px; 
    color: #b5b5ba; 
    font-size: 17px; 
} 
.progress .circle .title { 
    color: #b5b5ba; 
    font-size: 13px; 
    line-height: 30px; 
    margin-left: -5px; 
} 

/* Done/Active */ 
.progress .bar.done, 
.progress .circle.done { 
    background: #eee; 
} 
.progress .bar.active { 
    background: linear-gradient(to right, #EEE 40%, #FFF 60%); 
} 
.progress .circle.done .label { 
    color: #FFF; 
    background: #8bc435; 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
} 
.progress .circle.done .title { 
    color: #444; 
} 
.progress .circle.active .label { 
    color: #FFF; 
    background: #0c95be; 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
} 
.progress .circle.active .title { 
    color: #0c95be; 
} 
</style> 

Вот мои элементы тела с title и circle

<div class="progress"> 
    <div class="circle active"> 
    <span class="label">1</span> 
    <span class="title">Ticket&nbsp;Requested</span> 
    </div> 
    <span class="bar"></span> 
    <div class="circle"> 
    <span class="label">2</span> 
    <span class="title">Ticket&nbsp;Raised</span> 
    </div> 
    <span class="bar"></span> 
    <div class="circle"> 
    <span class="label">3</span> 
    <span class="title">Completed</span> 
    </div> 
</div> 

И я делаю это JQuery, чтобы изменить left моего title относительно circle, но это не wotking.

$(document).ready(function(){ 
    for (i=1;i<4;i++){ 
     var pos = $('.progress .circle:nth-of-type(' + i + ')').position(); 
     var widthLabel = $('.progress .circle:nth-of-type(' + i + ') .title').outerWidth(); 
     $('.progress .circle:nth-of-type(' + i + ') .title').css({ 
      position: "aboslute", 
      left: (pos.left - (widthLabel/2)) + "px" 
     }); 
    } 
}); 

Answer 1

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

Попробуйте следующий код

$(document).ready(function(){ 
      for (i=1;i<4;i++){ 
      var widthLabel = $('.progress .circle:nth-of-type(' + i + ') .title').outerWidth(); 
      var widthCircle = $('.progress .circle:nth-of-type(' + i + ')').outerWidth(); 
      $('.progress .circle:nth-of-type(' + i + ') .title').css({ 
       position: "relative", 
       left: -((widthLabel/2) - (widthCircle/2)) + "px" 
      }); 
     } 
    }); 

Ширина этикетки затем вычитается с шириной окружности. Это сделает это

Answer 2

Вы указали положение: «абсолютное» неправильно в вашем jQuery.

Answer 3

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

https://fiddle.jshell.net/znrr38tv/

Вы можете редактировать свои шения

Answer 4

Используйте этот простой способ

$('.title').each(function(){ 
 
\t var width = $(this).width()/2; 
 
\t $(this).css({marginLeft: -width}); 
 
});

*, *:after, *:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    font-family: "Open Sans"; 
 
} 
 

 

 
/* Form Progress */ 
 
.progress { 
 
    /*width: 1500px;*/ 
 
    width: 100%; /*demo use*/ 
 
    margin: 20px auto; 
 
    text-align: center; 
 
} 
 
.progress .circle, 
 
.progress .bar { 
 
    display: inline-block; 
 
    background: #fff; 
 
    width: 40px; height: 40px; 
 
    border-radius: 40px; 
 
    border: 1px solid #d5d5da; 
 
} 
 
.progress .bar { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 6px; 
 
    margin-left: -5px; 
 
    margin-right: -5px; 
 
    border-left: none; 
 
    border-right: none; 
 
    border-radius: 0; 
 
} 
 
.progress .circle{ 
 
    position: relative; /* new changes*/ 
 
} 
 
.progress .circle .label { 
 
    display: inline-block; 
 
    width: 32px; 
 
    height: 32px; 
 
    line-height: 32px; 
 
    border-radius: 32px; 
 
    margin-top: 3px; 
 
    color: #b5b5ba; 
 
    font-size: 17px; 
 
} 
 
.progress .circle .title { 
 
    color: #b5b5ba; 
 
    font-size: 13px; 
 
    line-height: 30px; 
 
    margin-left: -5px; 
 
    /* new changes*/ 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 33px; 
 
} 
 

 
/* Done/Active */ 
 
.progress .bar.done, 
 
.progress .circle.done { 
 
    background: #eee; 
 
} 
 
.progress .bar.active { 
 
    background: linear-gradient(to right, #EEE 40%, #FFF 60%); 
 
} 
 
.progress .circle.done .label { 
 
    color: #FFF; 
 
    background: #8bc435; 
 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
 
} 
 
.progress .circle.done .title { 
 
    color: #444; 
 
} 
 
.progress .circle.active .label { 
 
    color: #FFF; 
 
    background: #0c95be; 
 
    box-shadow: inset 0 0 2px rgba(0,0,0,.2); 
 
} 
 
.progress .circle.active .title { 
 
    color: #0c95be; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="progress"> 
 
    <div class="circle active"> 
 
    <span class="label">1</span> 
 
    <span class="title">Ticket&nbsp;Requested</span> 
 
    </div> 
 
    <span class="bar"></span> 
 
    <div class="circle"> 
 
    <span class="label">2</span> 
 
    <span class="title">Ticket&nbsp;Raised</span> 
 
    </div> 
 
    <span class="bar"></span> 
 
    <div class="circle"> 
 
    <span class="label">3</span> 
 
    <span class="title">Completed</span> 
 
    </div> 
 
</div>

Fiddle