CODEWITHSUNDEEP
htmlcss
user1448031
user1448031

Reputation: 2166

How to expand the height of li inside vertically centered div?

I have ul that is vertically centered. I would like to expand the height of li to be the same height of div.wrapper so that on hover, the entire height of li is covered with the background colour. Currently it only covers the width of the li.

.wrapper {
    display:table;
    height:8em;
    background-color:#004857;
    width:100%;
}
.inner {
    display:table-cell;
    vertical-align:middle;
}
ul.list {
    margin:0;
    padding:0;
    list-style:none;
    width:50%;
    margin:auto;
    height:100%;
}
ul.list li {
    float:left;
    width:5em;
    text-align:center;
}
ul.list li a {
    color: #fff;
    display:block;
}
ul.list li a:hover {
    background-color: #ff5500;
}
<div class="wrapper">
    <div class="inner">
        <ul class="list">
            <li><a href="#">One</a>
            </li>
            <li><a href="#">Two</a>
            </li>
            <li><a href="#">Three</a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 863

Answers (4)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15777

try this

DEMO FIDDLE

ul.list li {
    float:left;
    width:5em;
   line-height: 8em; //added
    text-align:center;
}
ul.list li a {
    color: #fff;
    display:block;
    height:100%; //added
}

tried @Der Vampyr's comment

Another possible solution is to add line-height: 8em; to ul.list li and height:100%;

Upvotes: 0

K K
K K

Reputation: 18099

Try this:

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/462/

CSS:

.wrapper {
    display:table;
    height:8em;
    background-color:#004857;
    width:100%;
}
.inner {
    display:table-cell;
    vertical-align:middle;
}
ul.list {
    margin:0;
    padding:0;
    list-style:none;
    width:50%;
    margin:auto;
    height:100%;
}
ul.list li {
    float:left;
    width:5em;
    height:inherit; //added
    text-align:center;
}
ul.list li a {
    color: #fff;
    display:block;
    padding:4em 0;//added
}
ul.list li a:hover {
    background-color: #ff5500;
}

Upvotes: 2

Loedolff
Loedolff

Reputation: 172

Add height: 100%; to both ul.list li and ul.list li a.

Upvotes: -2

Leon
Leon

Reputation: 919

Currently you're only using the float option (:hover) on the anchor. The anchor is the element that changes background color, not the div.

You could try to expand the size of the anchor (a) in the css. This anchor is still default in size.

Upvotes: 1

Related Questions