I am trying to center the text in the anchor. I used the 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 the way it happens?
Run this piece of code and click on the circle to show other circles, and you will understand 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 many browsers as possible. If you add additional properties to support more browsers, please tell me which line is intended for which browser.
source share