CODEWITHSUNDEEP
htmlmenucss
RhymeGuy
RhymeGuy

Reputation: 2112

Vertically align menu in CSS

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/

Upvotes: 1

Views: 149

Answers (7)

Dee
Dee

Reputation: 714

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>

Upvotes: 0

Anonymous
Anonymous

Reputation: 10216

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>

Upvotes: 0

Refilon
Refilon

Reputation: 3489

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

Upvotes: 1

Berthy
Berthy

Reputation: 358

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

Upvotes: 0

Brewal
Brewal

Reputation: 8189

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

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 0

Phani
Phani

Reputation: 861

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

Upvotes: 1

Related Questions