Vertically align menu in CSS - html

Question

Im stuck in creating the following menu. Cant get it to center. Seems like img inside span is breaking the display.
DESIRED RESULT:
HTML:
<ul id="rounded-cats" class="cleardiv">
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
</ul>
CSS:
#rounded-cats {
text-align: center;
//display: table;
border: 1px solid red;
width: 100%
}
#rounded-cats li {
//margin-bottom: 20px;
//height: 190px;
display: inline;
}
#rounded-cats span {
background: #c7c7c7;
width: 112px;
height: 112px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
text-align: center;
display: block;
vertical-align:middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
display: inline !important
}
#rounded-cats a:hover span {
background: #7c6eb0
}
#rounded-cats a:hover {
color: #7c6eb0
}
#rounded-cats img {
margin: auto;
display: block;
}
JSFIDDLE:
http://jsfiddle.net/gtux2snu/

Answer 1

Look at this demo
I have made changes to #rounded-cats li and #rounded-cats span img styles.
#rounded-cats {
text-align: center;
//display: table;
border: 1px solid red;
width: 100%
}
#rounded-cats li {
//margin-bottom: 20px;
//height: 190px;
display: inline-block;
width:150px;//added some width to each li
float:left;//floated elements left
text-align:left;//aligned category name with image
padding:20px;//add padding so it looks good and separated.
}
#rounded-cats span {
background: #c7c7c7;
width: 112px;
height: 112px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
text-align: center;
display: block;
vertical-align:middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
display: inline !important;
margin-top:18px;//centered img inside circle
}
#rounded-cats a:hover span {
background: #7c6eb0
}
#rounded-cats a:hover {
color: #7c6eb0
}
#rounded-cats img {
margin: auto;
display: block;
}

Answer 2

Look at this Fiddle
li{
display: table;
}
span{
display: table-cell;
}
I now got exactly what you want. Just like you want it. Take a look at the fiddle and let me know if this is what you want.
UPDATED!!!!!!!!!!!!!!!!!!!!!

Answer 3

My solution is to use float: left to li elements and clear float after 5n:
#maintCont {
position:relative;
width: 100%;
margin: 0 auto;
text-align: center;
}
#rounded-cats {
text-align: center;
border: 1px solid red;
display: inline-block;
}
#rounded-cats li {
//margin-bottom: 20px;
//height: 190px;
display: inline;
}
#rounded-cats span {
background: #c7c7c7;
width: 112px;
height: 112px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
text-align: center;
display: block;
vertical-align:middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
display: inline !important
}
#rounded-cats a:hover span {
background: #7c6eb0
}
#rounded-cats a:hover {
color: #7c6eb0
}
#rounded-cats img {
margin: auto;
display: block;
}
#rounded-cats > li {
float: left;
margin: 20px;
}
#rounded-cats > li:nth-child(5n) {
clear: left;
padding-left: 65px;
}
<div id="maintCont">
<ul id="rounded-cats" class="cleardiv">
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
<li> <a href="#">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</a>
</li>
</ul>
</div>

Answer 4

You will have to make you li inline-block and give the span some padding :
demo
#rounded-cats li {
display: inline-block;
}
And the span :
#rounded-cats span {
width: 70px;
height: 70px;
padding: 21px; /* to get a span width and height of 112px */
/* code */
}

Answer 5

I think that this should do the trick:
http://jsfiddle.net/gtux2snu/15/
I added a div element to wrap the li content with relative position so the category name can be absolute positioned to the bottom. Also set the span circle to relative and the img to absolute with top: 50% and a negative half height margin-top.
<a href="#">
<div class="cats-wrap">
<span>
<img src="http://placehold.it/70" height="70" />
</span>
<strong>
Category name
</strong>
</div>
</a>
I changed this part of CSS:
#rounded-cats span {
background: #c7c7c7;
width: 112px;
height: 112px;
border-radius: 50%;
position: relative; /* To contain the absolute positioned img */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
text-align: center;
display: inline-block;
vertical-align:middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
display: inline !important;
position: absolute;
top: 50%; /* align all the img 50% top */
left: 50%;
margin-left: -35px;
margin-top: -35px; /* Half the img height so img is centered */
}
#rounded-cats .cats-wrap{ /* Wrapper element set to relative */
display: inline-block;
position: relative;
height: 140px; /* Add some height to the wrapper so the category name can fit */
}
#rounded-cats strong{
position: absolute;
bottom: 0; /* Category is aligned to the absolute bottom */
left: 0;
right: 0;
margin: auto; /* To center the category name */
}

Answer 6

I have fixed some issues in your css and you could simply do that like this:
DEMO
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
}
#rounded-cats {
text-align: center;
border: 1px solid red;
width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
#rounded-cats li {
display: inline-block;
margin: 20px;
}
#rounded-cats span {
background: #c7c7c7;
width: 112px;
height: 112px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
text-align: center;
display: block;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#rounded-cats span:before {
height: 100%;
content:" ";
vertical-align: middle;
display: inline-block;
}
#rounded-cats span img {
vertical-align: middle;
}
#rounded-cats a {
text-decoration: none;
}
#rounded-cats a:hover span {
background: #7c6eb0
}
#rounded-cats a:hover {
color: #7c6eb0
}
<ul id="rounded-cats" class="cleardiv">
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
<li>
<span><img src="http://placehold.it/70" height="70" /></span>Category name
</li>
</ul>

Answer 7

Here's my code pen http://jsfiddle.net/dfrierson2/gtux2snu/19/
I seperated the elements into div's for centering, and I used lists for the inline display.
ul li {
list-style-type: none;
margin-left: 10px;
}
li {
display: inline-block;
}
li a {
color: #000;
text-decoration: none;
margin-bottom: 10px !important;
}
#rounded {
text-align: center;
//display: table-cell;
vertical-align: middle;
margin: 1em 0;
height: auto;
position: relative;
}
#rounded img {
margin-bottom: 55px;
position: relative;
}
#rounded-cats {
background: #c7c7c7;
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
text-align: center;
display: block;
vertical-align:middle;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-align: center;
border-box: sizing;
margin-bottom: 45px;
padding: 20px;
position: relative;
}
<ul>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
<li>
<div id="rounded-cats">
<div id="rounded">
<img src="http://placehold.it/70" height="70" />
<a href="#">
<strong>
Category name
</strong>
</a>
</div>
</div>
</li>
</ul>