This question has already been answered:

enter image description here

window.onload = function() { var circle = document.querySelectorAll(".circle"); var circIn = document.querySelectorAll(".circle__inv"); var circInCnt = document.querySelectorAll(".count__hgt"); for(var i = 0;i<circle.length;i++) { circle[i].style.height = circle[i].offsetWidth + "px"; circIn[i].paddingTop = circIn[i].paddingTop - circInCnt.offsetHeight "px"; } } .circle { width: 15%; background: #900C3F; border-radius: 50%; text-align: center; font-size: 18px; margin: 0 auto; cursor: pointer; transition: 1s; } .circle__inv { width: 100%; height: 100%; padding-top: 50%; }

The text should be in the middle vertically and horizontally, insufficient vertical positioning accuracy (an error in my code). Most likely it is in js (mixed up values, objects). Please help, it is very important

Reported as a duplicate member of PashaPash ♦ 1 Feb '17 at 19:16 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Read www.stackoverflow.com/questions/466836 or use site search (search for css vertical centering) - tutankhamun
  • Does not fit the problem, perhaps I did not understand? I apologize in advance, new, dumb - amazingman216

1 answer 1

If all you need is to center the text vertically in this circle, then do not reinvent the wheel. CodePen .

HTML:

 <div> <span>Выберите интересующую тему</span> </div>

CSS:

 div { width: 150px; height: 150px; margin: 0 auto; background: #900C3F; border-radius: 50%; text-align: center; font-size: 18px; cursor: pointer; } span { display: inline-block; margin-top: 50%; transform: translateY(-50%); color: #fff; }
  • Thank you, I used this material, but there are a couple of questions: 1) I did not understand why the margin-top: 50%; you need a span, it works without it (maybe it's still for something else? After all, it is theoretically better to give padding to parents) 2) Why did you remove adaptivity from the block (circle). Thanks for earlier, reduced this section javascript - amazingman216
  • @ amazingman216 1. Open the link to CodePen, that in my answer, remove the margin-top there, it will stop working. Setting padding to a parent is no better. We position the text inside this block. Suddenly you want something else to stick in this circle, that you will not need to position in this way? 2. Because this is an example. If you need adaptability - do it :) - Igor Adamenko