在DIV内垂直居中UL

Question

我试图在200px x 200px的正方形内制作一个导航菜单,这个导航列表(UL)从正方形(200px)变为2行的正方形,就像一张桌子,它有一些过渡和更多的东西,但是我认为这不会影响我想要完成的垂直居中.(我已经看到了这个问题的其他答案,但它们不适合这个特定情况,行高不起作用等)这些多个菜单是我想根据我添加的每个元素对齐的菜单,如果我只添加1个元素,那么它看起来像中心的正方形,当然也有一个元素的限制,可以放在正方形,我有一个最大已经(5个元素)根据我的实际HTML - CSS

这就是我想要完成的

html标记是这样的

<div id="table" align="center" border="0" cellpadding="5" cellspacing="5" style="width 100%"> 
                  <div id="row">  
                      <div> 
                          <div class="nav"><ul><li><a href=link...>Element 1</a></li> <!----- this is the navigation menu that is in top of an image---> 
                              <img alt="" src="image.jpg" style="width: 200px; height: 200px;" /></div> 
                         <div class="nav"><ul><li><a href=link...>Element 1</a></li><li><a href=link...>Element 2</a></li> <!----- this is the navigation menu that is in top of an image---> 
                              <img alt="" src="image.jpg" style="width: 200px; height: 200px;" /></div> 

我知道我没有给出太多的信息,但我不能真正把代码放在原处,这对私人公司来说很有用,但我希望你理解我的情景,img上面的菜单有一个RGB alpha过渡使它出现在on:hover,但同样,我认为重要的是将每个按钮垂直对齐,而不是使用"position:relative; top:30px;对于每个不同的部分重复使用特殊的"修复" " 我可以做到这一点,但我想了解,看看我是否可以毫不费力地做到这一点,并添加我想要的元素,并在完美的中心自动对齐.

非常感谢你的帮助.(英语不是我的第一语言,所以我希望它是可以理解的)

Answer 1

垂直居中的技巧包括两个简单的步骤:

1. 使用将内容移动到其高度的上半部分transform: translateY(-50%).

   

2. 申请top: 50%.必须相对定位元素才能使其工作.

   

有很多方法可以做到这一点.

body {
  background: #333333;
}
.main-container {
  width: 640px;
  margin: 0 auto;
}
.container {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 250px;
  background: #0077A3;
  margin: 5px;
}
ul {
  position: relative;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  top: 50%;
}
li {
  text-align: center;
  height: 25px;
  margin: 10px;
}
span {
  background-color: #00C430;
  padding: 5px 10px 5px 10px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

<div class="main-container">
  <div class="container">
    <ul>
      <li><span>Element 1</span></li>
      <li><span>Element 2</span></li>
      <li><span>Element 3</span></li>
    </ul>
  </div>
  <div class="container">
    <ul>
      <li><span>Element 1</span></li>
    </ul>
  </div>
  <div class="container">
    <ul>
      <li><span>Element 1</span></li>
      <li><span>Element 2</span></li>
    </ul>
  </div>
</div>

Answer 2

您可以使用未知方法中心.

使用HTML之类的

<div class="container">
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>
</div>

要ul垂直居中.container,请使用

.container:before {
  content: '';
  height: 100%;
}
.container:before, ul {
  display: inline-block;
  vertical-align: middle;
}

body {
  background: #333333;
}
.main-container {
  width: 610px;
  margin: 0 auto;
}
.container {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 200px;
  height: 250px;
  background: #0077A3;
}
.container:before {
  content: '';
  height: 100%;
}
.container:before, ul {
  display: inline-block;
  vertical-align: middle;
}
ul {
  padding: 0;
  list-style: none;
}
li {
  margin: 10px;
  padding: 5px 10px;
  background-color: #00C430;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

<div class="main-container">
  <div class="container">
    <ul>
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
    </ul>
  </div>
  <div class="container">
    <ul>
      <li>Element 1</li>
    </ul>
  </div>
  <div class="container">
    <ul>
      <li>Element 1</li>
      <li>Element 2</li>
    </ul>
  </div>
</div>