Oto jsfiddle paska postępu wyrównanego pionowo. Jak zrobiłbym ich wyrównali poziomo i wyśrodkowali?

https://jsfiddle.net/ble0jlar/

.wrapper {
  width: 100px;
  height: 100px;
}

.wrapper > #bar,
#bar2,
#bar3 {
  position: relative;
}

.wrapper > #bar,
#bar2,
#bar3,
.wrapper img {
  width: 100%;
  height: 100%;
}

.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}

.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}
0
user8212730 26 czerwiec 2017, 07:34

3 odpowiedzi

Najlepsza odpowiedź

Pasek postępu są wyrównane pionowo . Jak je wyrównać poziomo i wyśrodkowany?

Jedyną rzeczą, której potrzebujesz, jest zmiana reguły wrapper

.wrapper {
  display: flex;
  justify-content: center;
}

Proponuję kilka zmian w CSS (patrz uwagi). Ponadto nie ma potrzeby łączenia selektora dziecka > za pomocą selektora identyfikatora # jak ten .wrapper > #bar, ponieważ jest tylko jeden element z tym identyfikatorem

Zaktualizowane skrzypce z sugerowanymi zmianami

Stack Styppet.

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);
.wrapper {
  display: flex;
  justify-content: center;
}

#bar,                      /* changed ".wrapper > #bar" to "#bar" */
#bar2,
#bar3 {
  position: relative;
  margin: 0 5px;           /* add a small gap between the circles */
}

/* .wrapper > #bar,          removed this rule as it is not needed
#bar2,                       
#bar3,
.wrapper img {
  width: 100%;
  height: 100%;
}                                                                  */

.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
  width: 100%;             /* added, so they scale on smaller screens */
}

.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>
0
Ason 26 czerwiec 2017, 08:01

Możesz użyć Bloki w linii, aby rozwiązać swoje pytanie. Następnie możliwe jest wyrównanie bloków poziomo tak podobnych jak elementy inline za pomocą właściwości text-align CSS pojemnika nadrzędnego.

var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);
.wrapper {
  text-align:center;
}
.wrapper > div {
  display: inline-block;
  position: relative;
}

.wrapper img {
  width: 100%;
  height: 100%;
}

.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}

.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>
0
Alexander 26 czerwiec 2017, 08:18

Usuń width i height do img i użyj flex, aby uzyskać także Usuń height i width z wrapper klasa środek.

Zaktualizuj po części CSS

.wrapper {
  display:flex;
  justify-content:center;
  flex-flow:column;
  align-items:center;
}
var circle = new ProgressBar.Circle('#bar', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar2', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);

var circle = new ProgressBar.Circle('#bar3', {
  strokeWidth: 4,
  color: '#000'
});

circle.animate(1);
.wrapper {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}

.wrapper>#bar,
#bar2,
#bar3 {
  position: relative;
}

.wrapper>#bar,
#bar2,
#bar3,
.wrapper img {
  /*   width: 100%;
  height: 100%; */
}

.wrapper img {
  box-sizing: border-box;
  padding: 4%;
  border-radius: 50%;
}

.wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
  <div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
  <div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
  <div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>

Porade Fiddle - Fiddle Link

2
LKG 26 czerwiec 2017, 04:50