CSS вертикальный центр по кругу - PullRequest
Новая
       24

CSS вертикальный центр по кругу

7 голосов
/ 17 марта 2012

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

Запустите этот фрагмент кода и нажмите на кружок, чтобы открыть остальные кружки, и вы поймете, что я имею в виду. 

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

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

Ответы [ 2 ]

7 голосов
/ 18 марта 2012

Для этого вы можете использовать display:table свойство.Напишите это так: 

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

Проверьте this JSFiddle.

0 голосов
/ 13 апреля 2012

Для этого вы можете использовать стиль элемента 

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