CSS vertical align center in circles

Question

I am trying to vertical center text in anchor. I used line-height and it works, but when the text wraps, the text in the second line gets the line-height... How can I center the text in the anchor without fails like that?

Run this code snippet and click on the circle to reveal the other circles and you'll see what I mean.

(function($) {
  $.path = {};
  $.path.arc = function(params) {
    for (var i in params) {
      this[i] = params[i]
    }
    this.dir = this.dir || 1;
    while (this.start > this.end && this.dir > 0) {
      this.start -= 360
    }
    while (this.start < this.end && this.dir < 0) {
      this.start += 360
    }
    this.css = function(p) {
      var a = this.start * (p) + this.end * (1 - (p));
      a = a * 3.1415927 / 180;
      var x = Math.sin(a) * this.radius + this.center[0];
      var y = -Math.cos(a) * this.radius + this.center[1];
      return {
        top: y + "px",
        left: x + "px"
      }
    }
  };
  $.fx.step.path = function(fx) {
    var css = fx.end.css(1 - fx.pos);
    for (var i in css) {
      fx.elem.style[i] = css[i]
    }
  }
})(jQuery);

$(function() {
  var clicked = false,
    allowAnimate = true;
  $('.MainCircle').click(function() {
    var list = $(this).siblings('ul').children('li'),
      noli = list.size();
    if ((!clicked) && (allowAnimate)) {
      allowAnimate = false;
      list.each(function(i) {
        var li = $(this);
        var liw = li.width();
        if (i == 0) {
          li.animate({
            top: (liw * -2.3) + "px"
          }, 250);
        } else {
          li.delay(250).animate({
            path: new $.path.arc({
              center: [0, 0],
              radius: liw * 2.3,
              start: 0,
              end: 360 / noli * i,
              dir: 1
            })
          }, 500, function() {
            if (i + 1 == noli) {
              clicked = !clicked;
              allowAnimate = true;
            }
          });
        }
      });
    } else if ((clicked) && (allowAnimate)) {
      allowAnimate = false;
      list.each(function(i) {
        var li = $(this);
        li.animate({
          top: 0,
          left: 0
        }, 500, function() {
          if (i + 1 == noli) {
            clicked = !clicked;
            allowAnimate = true;
          }
        });
      });
    }
  });
});

body {
  font-family: verdana;
  font-size: 12px
}

ul {
  list-style: none;
  margin: 0;
  padding: 0
}

a {
  color: #000;
  text-decoration: none
}

#CircledMenu li {
  position: absolute
}

.MainCircle {
  background: red;
  border-radius: 100px;
  display: block;
  height: 200px;
  line-height: 200px;
  position: absolute;
  text-align: center;
  width: 200px;
  z-index: 1
}

.SubMenu li {
  margin: 50px
}

.SubMenu a {
  background: red;
  border-radius: 50px;
  display: block;
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 100px
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
  <ul style="margin:200px;" id="CircledMenu">
    <li>
      <a href="#" class="MainCircle">Products</a>
      <ul class="SubMenu">
        <li><a href="#">Kitchen</a></li>
        <li><a href="#">Bedroom</a></li>
        <li><a href="#">Car</a></li>
        <li><a href="#">DIY/Storage</a></li>
        <li><a href="#">Bathroom</a></li>
        <li><a href="#">Footwear</a></li>
        <li><a href="#">Garden/Outdoor/Travel</a></li>
        <li><a href="#">Health</a></li>
        <li><a href="#">Gifts</a></li>
        <li><a href="#">Pet</a></li>
        <li><a href="#">Living Solutions</a></li>
        <li><a href="#">Clock/Lighting</a></li>
        <li><a href="#">Personal Care</a></li>
        <li><a href="#">Practial Solutions</a></li>
      </ul>
    </li>
  </ul>
</body>

</html>

I would like to support as much as possible browsers. if you add extra properties to support more browsers, please say which line is for which browser by adding comment.

Posts with links to JSFiddle and without code don't actually have code. Only you have the privilege to transfer the code from there - it is licensed, so single members can't do it. So, for now, I have VTC'd to close your question as no MCVE until you add the code. — double-beep, Apr 19 '19 at 11:02

score 7 · Accepted Answer · edited Apr 19 '19 at 10:59

7

You can use display:table property for this. Write it like this:

.SubMenu li {
  margin:50px;
  background:red;
  border-radius:50px;
  height:100px;
  width:100px;
  display:table;
}

.SubMenu a {
   height:100px;
   width:100px;
   display:table-cell;
   text-align: center;
   vertical-align: middle;
}

Check this JSFiddle.

edited Apr 19 '19 at 10:59

double-beep

5,031
17
33
41

answered Mar 17 '12 at 20:24

sandeep

91,313
23
137
155

score 0 · Answer 2 · answered Apr 13 '12 at 12:06

0

You can use element style for that

element.style {
line-height: 13px;
padding-top: 37px;
height: 60px;}

answered Apr 13 '12 at 12:06

Sam

146
15

CSS vertical align center in circles

2 Answers2