CODEWITHSUNDEEP
htmlcss
eternal_noob
eternal_noob

Reputation: 43

Align menu text to bottom of li

I'm trying to align some text to the bottom of li (marked with green borders), but "vertical-align: bottom" does not work and "position: absolute; bottom: 0" cause text to pile up outside the li. What am I doing wrong?

Jsfiddle: http://jsfiddle.net/eternal_noob/dog42xeh/

HTML:

<div class="head">
<div class="logo">  <a href="/" title="Back to homepage">
    <img src="http://www.dierenasielamsterdam.nl/files/homepage/Poes-virtueel-asiel.jpg">
    </a>

</div>
<div class="nav">
    <div class="icon-top">  <span>(999)999-9999 / (999)999-9999</span>

    </div>
    <div class="menu">
        <ul class="topmenu">
            <li><a href="a.php">Abyssinian</a>
            </li>
            <li><a href="b.php">Munchkin</a>
            </li>
            <li><a href="c.php">Persian</a>
            </li>
            <li><a href="d.php">Siamese</a>
            </li>
            <li><a href="e.php">About</a>
            </li>
        </ul>
    </div>
</div>

CSS:

.head {
    text-align: center;
    height: 150px
}
    .head:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em
}
.logo {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 350px;
}
.nav {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 600px;
}
.icon-top {
    line-height:29px;
    padding-right:20px;
    color:#333;
    font-size:15px;
    text-align:right;
}
.menu {
    position: relative;
    text-align:right;
}
.menu-header {
    height:50px;
}
.topmenu {
    display: inline-block;
    height:65px;
    margin:0;
    padding:0;
    font-size: 20px;
}
.topmenu li {
    display: inline-block;
    height:100%;
    list-style:none;
    margin-left:20px;
    border: solid 1px green;
}
.topmenu li a {
    color: #000000;
    vertical-align:text-bottom;
}
.topmenu li a:hover {
    color:#b574d4;
}

Upvotes: 4

Views: 3101

Answers (2)

Suraj
Suraj

Reputation: 930

Here's a fix that might help.

.topmenu li a {
  color: #000000;
  /* vertical-align: bottom; */
  position: relative;
  top: 46px; /* or.. top: 40px; */
}

fiddle

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You can add line-height like this:

.topmenu li a { 
    color: #000000;
    line-height: 110px;/*Add this*/
}

fiddle

Another solution is to use table-cell:

.menu {
    position: relative;
    display: table;/*Add display table*/
    margin: 0 auto;/*Add margin 0 auto to align to the middle of the page*/
}    

.topmenu {
    display: table-row;/*Add display table-row*/
    height:65px;
    margin:0;
    padding:0;
    font-size: 20px;
}


.topmenu li {
    display: table-cell;/*Add display table-cell*/
    /*height:100%; Remove height*/
    list-style:none;
    margin-left:20px;
    border: solid 1px green;
    vertical-align: bottom;/*Add vertical-align bottom*/
}

fiddle

Take a look here: Understanding vertical-align, or "How (Not) To Vertically Center Content"

Upvotes: 2

Related Questions