Member Avatar for ben.matthews18

hi,
i am trying to vertical align the text in a block; here's my current html and css -

html -

<ul>
   <li><a href="index.php">Home</a></li>
   <li><a href="aboutme.php">About me</a></li>
   <li><a href="portfolio.php">Portfolio</a></li>
   <li><a href="comingsoon.php">Coming soon</a></li>
   <li><a href="contact.php">Contact me</a></li>
</ul>

CSS -

#nav ul{
    margin:0px;
    padding:0px;
    overflow:hidden;
}

#nav li{
    display:inline;
    padding:0px;
    list-style:none;
}

#nav li a:link{
    font-family:Calibri;
    font-size:18px;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    color:#FFF;
    display:block;
    height:40px;
    width:122px;
    float:left;
    margin-left:10px;
    margin-top:30px;
    background-color:#263D46;
}

#nav li a:visited{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}

#nav li a:hover{
    color:#FFF;
    background-color:#528396;   
    text-decoration:underline;
}

#nav li a:active{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}

any help would be appreciated :) thanks

  • 2 Contributors
  • 1 Reply
  • 201 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Good start, — and was right to point out the missing wrapper and selector scope. The core issue here is that vertical-align only affects inline-level or table-cell elements; it won’t vertically center text inside a block-level anchor by itself. Also, using margin-top on the anchor to “push” it down defeats true centering. Two simple, reliable approaches follow (one for single-line labels, one robust modern method), plus a classic fallback.

Single-line labels — quick fix

/* when each menu label is exactly one line */
#nav ul li a {
  display: block;
  height: 44px;
  line-height: 44px;   /* centers a single line of text vertically */
  text-align: center;
  padding: 0 12px;
}

Flexible, modern approach — use Flexbox

/* removes floats and centers both horizontally and vertically */
#nav ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
#nav ul li a {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center;
  height: 48px;
  padding: 0 14px;
}

Table-cell fallback & tips

#nav { display: table; width: 100%; }
#nav ul li { display: table-cell; vertical-align: middle; }
  • Remove margin-top on the anchor and use padding or gap on the container for spacing.
  • If you used float:left, remove it when switching to flexbox or table-cell.
  • For multi-line labels, avoid the line-height trick — use flexbox or larger padding so wrapped lines read comfortably.
  • Test in DevTools to inspect computed height/line-height and ensure touch targets meet accessibility (~44–48px).
Member Avatar for JorgeM

First, your CSS is targetting an element with an ID = "nav". You didnt include that in the post so I am not sure if you had that element "wrapping" in your source code. In any event, see the HTML code i pasted below. I "wrapped" your unordered list within a div assigned the id = "nav". That fixes the issue with regard to targetting your elements.

Second, if you want to target li elements, you have to go through the DOM tree properly. For example, "nav" element --> ul --> li. In your code you went from "nav" to li. copy and paste the code I provided below and see if you have any other questions.

<html>
<head>
<title></title>
<style type="text/css">
#nav ul{
    margin:0px;
    padding:0px;
    overflow:hidden;
}
#nav ul li{
    display:inline;
    padding:0px;
    list-style:none;
}
#nav ul li a:link{
    font-family:Calibri;
    font-size:18px;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    color:#FFF;
    display:block;
    height:40px;
    width:122px;
    float:left;
    margin-left:10px;
    margin-top:30px;
    background-color:#263D46;
}
#nav ul li a:visited{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}
#nav ul li a:hover{
    color:#FFF;
    background-color:#528396;   
    text-decoration:underline;
}
#nav ul li a:active{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}
</style>
</head>

<body>
 <div id="nav">
  <ul>
   <li><a href="index.php">Home</a></li>
   <li><a href="aboutme.php">About me</a></li>
   <li><a href="portfolio.php">Portfolio</a></li>
   <li><a href="comingsoon.php">Coming soon</a></li>
   <li><a href="contact.php">Contact me</a></li>
  </ul>
 </div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.