html垂直对齐垂直菜单中的文本

Question

我的想法是在左边有一个垂直菜单，在它的右边我有一个带有文本和按钮的横幅(图像)。

我有以下 html/css 代码

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

我无法在 CategoryMenu 类下的菜单中将文本垂直居中 我尝试了 google 中的所有建议，有人可以帮忙吗？

Answer 1

为什么不把你的 padding 改成这个？

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

代替 padding: 8px 0px 30px 16px;

演示

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