Menu
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.
787
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.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
