Vertically align menu in CSS

Question

Im stuck in creating the following menu. Cant get it to center. Seems like img inside span is breaking the display.

DESIRED RESULT: menu

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/

http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — chris, Oct 21 '14 at 14:30
FYI `//display: table;` is not a CSS comment, you should use this: `/* display: table; */` — wf4, Oct 21 '14 at 14:31

score 1 · Answer 1 · answered Oct 21 '14 at 14:35

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

Refilon · Answer 2 · 2014-10-21T14:58:39.033

1

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

edited Oct 21 '14 at 14:58

answered Oct 21 '14 at 14:36

Refilon

3,334
1
27
51

Brewal · Answer 3 · 2014-10-21T14:39:44.790

0

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 */
}

edited Oct 21 '14 at 14:39

answered Oct 21 '14 at 14:32

Brewal

8,067
2
24
37

score 0 · Answer 4 · answered Oct 21 '14 at 14:37

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>

Din't get is ok or not? Tell me or i delete this answer :) – Alex Char Oct 21 '14 at 15:08 — Alex Char, Oct 21 '14 at 15:08

score 0 · Answer 5 · answered Oct 21 '14 at 14:55

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 */
}

score 0 · Answer 6 · answered Oct 21 '14 at 22:34

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>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
    <li>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
    <li>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
    <li>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
    <li>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
    <li>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
    <li>
        <a href="#"><span><img src="http://placehold.it/70" height="70" /></span>Category name</a>
    </li>
</ul>

score 0 · Answer 7 · answered Feb 21 '15 at 19:38

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>

Vertically align menu in CSS

7 Answers7

DEMO