I have made a nav out of css drawn circles as anchor elements. They all have varying amounts of text in them causing them to spill out of the circles. So I have used a JS solution to horizontally align the text to the middle of the circle. The problem I now have is that the circles baselines are unequal depending on how many lines of text are in them. Is there an easy css solution to this. Or will I have to calculate and amend the heights of each list item with javascript as well?
.html
<ul class="list-inline nav-horizontal">
<li role="presentation" class="active">
<a href="#1" data-toggle="tab" class="stylish">#1</a>
</li>
<li role="presentation">
<a href="#2" data-toggle="tab" class="stylish">#2</a>
</li>
<li role="presentation">
<a href="#3" data-toggle="tab" class="stylish">#3</a>
</li>
<li role="presentation">
<a href="#4" data-toggle="tab" class="stylish">#4</a>
</li>
<li role="presentation">
<a href="#5" data-toggle="tab" class="stylish">#5</a>
</li>
</ul>
.css
.list-inline {
display: inline-block;
padding: 6px;
}
.stylish {
display: block;
width: 140px;
height: 140px;
border-radius: 50%;
border: 8px solid #ED1B24;
font-size: 20px;
color: #BBAE92;
text-align: center;
text-decoration: none;
background: none;
line-height: 1.1em;
}
.stylish:hover, li.active .stylish {
color: #fff;
text-decoration: none;
background: #ED1B24;
}
.js
$("a.stylish").contents().wrap("<span>");
$("a.stylish span").css({
position : "relative",
"top" : function() {
return ($(this).parent().height() - $(this).height()) / 2
}
});
How about this? http://jsfiddle.net/hd8donbn/3/
.nav-horizontal li:before {
content:'';
display: inline-block;
vertical-align: middle;
height: 100%
}
.stylish {
display: inline-block;
text-decoration: none;
color: #ED1B24;
vertical-align: middle;
max-width: 90%
}
If its ok i will explain everything :D
I found a simple css solution. Adding vertical-align:text-top;
to the class of .list-inline li
solved the issue
well, not to be rude here, but i've written a markup of my own to cater to you needs, disregarding what you've given in your question. Hope you find it usefull:
HTML
<ul>
<li class="active"><a href="#">small</a></li>
<li><a href="#">medium content</a></li>
<li><a href="#">a bit larger content</a><`enter code here`/li>
<li><a href="#">really large hunk of content</a></li>
<li><a href="#">this is a rrrrreeeeaaaalllllllyyyyy big chunk, with a long word too</a></li>
</ul>
*{ margin: 0; padding: 0; } ul { display: inline-block; list-style: none; /*remove markers for `li`*/ } li { border-radius: 50%; /*border-radius 70px;*/ overflow: hidden; /*hide overflowing text, if any*/ float: left; /*puts things in line, with their tops aligned. */ /*If `display:inline-block` is used, it will match the bottoms at same level. try it*/ border: 8px solid #ED1B24; display: block; height: 140px; text-align: center; width: 140px; } li a{ padding: 0 5px; /*prevent border cutting*/ word-wrap: break-word; /*breaks long words*/ text-decoration: none; color: #BBAE92; /*the next 4 allow a child to be centered vertically*/ display: block; position: relative; top: 50%; transform: translateY(-50%); } li.active, li:hover{ cursor: pointer; /*makes it look like a link*/ background: #ED1B24; } li.active a, li:hover a{ color: #fff; }
$('li').click(function(){ $(this).child('a').click(); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.