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

Question

我们的想法是在左边有一个垂直菜单，在它右边有一个横幅（图像），上面有文字和按钮。

我有以下html / css代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法在课程CategoryMenu下的菜单中垂直居中显示文本我尝试了谷歌中的所有建议，有人可以帮忙吗？

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>

Answer 2

在top＆amp;处添加相同的值底部填充物。

.CategoryMenu li a {
   padding-top: 30px 0px 30px 16px
}

Answer 3

如果您想动态对齐它而不是故意添加填充或边距，则可以更改line-height，文本将自动垂直居中。

https://jsfiddle.net/JackHasaKeyboard/zyw756st/

这通常用于垂直居中，基本上占据整个高度，让浏览器将其粘在中间。