user3396397 user3396397 - 5 months ago 16
HTML Question

html vertical align text in vertical menu

The idea is to have a vertical menu on the left, and near it to the right i have a banner (image) with text and button on it.

I have the following html/css code



.banner {
position: relative;
}
.BannerImage {
width: 70%;
height: 400px;
float: right;
}
.bannerTXT {
font-weight: bold;
text-align: center;
font-size: 40px;
color: white;
position: absolute;
top: 170px;
left: 420px;
width: 600px;
height: 50px;
}
.bannerBtn {
font-size: 20px;
position: absolute;
top: 310px;
left: 650px;
}
.CategoryMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
height: 400px;
background-color: #f1f1f1;
}
.CategoryMenu li a {
display: block;
color: black;
padding: 8px 0px 30px 16px;
text-decoration: none;
}
.CategoryMenu li a:hover {
background-color: #555;
color: white;
}

<div class="banner">
<img id="imgBanner" class="BannerImage" alt="" src="../Images/MainPic.jpg" />
<div class="bannerTXT">
Text Text Text Text Text Text
<br />More Text Text Text Text Text
</div>
<p>
<asp:Button ID="banBtn" class="buttons bannerBtn" runat="server" Text="How it works" />
</p>
<div class="CategoryMenu">
<ul>
<li><a href="#">Electronics</a>
</li>
<li><a href="#">Clothes & Shoes</a>
</li>
<li><a href="#">Jewelry & Watches</a>
</li>
<li><a href="#">Sports</a>
</li>
<li><a href="#">Home & Garden</a>
</li>
<li><a href="#">Beauty & Cosmetics</a>
</li>
<li><a href="#">Children</a>
</li>
</ul>
</div>
</div>





I can't manage to vertically center the text in the menu under the class
CategoryMenu
i tried everything suggested in google, can anyone help?

Answer

Why not changing your padding to this?

.CategoryMenu li a {
  display: block;
  color: black;
  padding: 19px 0px 19px 16px;
  text-decoration: none;
}

In stead of padding: 8px 0px 30px 16px;

DEMO

.banner {
        position: relative;
      }
      .BannerImage {
        width: 70%;
        height: 400px;
        float: right;
      }
      .bannerTXT {
        font-weight: bold;
        text-align: center;
        font-size: 40px;
        color: white;
        position: absolute;
        top: 170px;
        left: 420px;
        width: 600px;
        height: 50px;
      }
      .bannerBtn {
        font-size: 20px;
        position: absolute;
        top: 310px;
        left: 650px;
      }
      .CategoryMenu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 250px;
        height: 400px;
        background-color: #f1f1f1;
      }
      .CategoryMenu li a {
        display: block;
        color: black;
        padding: 19px 0px 19px 16px;
        text-decoration: none;
      }
      .CategoryMenu li a:hover {
        background-color: #555;
        color: white;
      }
<div class="banner">
  <img id="imgBanner" class="BannerImage" alt="" src="../Images/MainPic.jpg" />
  <div class="bannerTXT">
    Text Text Text Text Text Text
    <br />More Text Text Text Text Text
  </div>
  <p>
    <asp:Button ID="banBtn" class="buttons bannerBtn" runat="server" Text="How it works" />
  </p>
  <div class="CategoryMenu">
    <ul>
      <li><a href="#">Electronics</a>
      </li>
      <li><a href="#">Clothes & Shoes</a>
      </li>
      <li><a href="#">Jewelry & Watches</a>
      </li>
      <li><a href="#">Sports</a>
      </li>
      <li><a href="#">Home & Garden</a>
      </li>
      <li><a href="#">Beauty & Cosmetics</a>
      </li>
      <li><a href="#">Children</a>
      </li>
    </ul>
  </div>
</div>