Question

我试图在div中垂直对齐内联列表元素，但是我无法弄清楚为什么它不起作用。我已经包括了

.nav li{
    display: inline;
    display: table-cell;
    vertical-align: middle;
    }
.nav ul {
    vertical-align: middle;
    display: table-cell;
    margin: 0% 6% 0% 0%;
    }

非常感谢帮助

https://jsfiddle.net/y1paacbh/

我看到由于jsfiddle呈现它的方式可能不清楚发生了什么。这是我浏览器中的图像

Answer 1

通过提供此样式，您可以解决此问题

  .nav li {
   position : relative;
   top : 8px;  
    }

Answer 2

您正在使用两个display属性。

改为使用

.nav li{
    display: block;
    vertical-align: middle;
    }

Answer 3

只需删除您的CSS代码并插入此代码即可。

.nav {
  background-color:green;
}

ul li {
  display:block;
}

如果我帮助你，请检查我的答案，如果没有，请解释你的问题。

Answer 4

我根据您的需要垂直更新您的视图

<style>
.nav {
    background-color:green;
    height: 10%;
    width: 100%;
}
.nav li{
    //display: inline;
    //display: table-cell;
    vertical-align: middle;

}
.nav ul {
    vertical-align: middle;
    //display: table-cell;
    margin: 0% 6% 0% 0%;
    list-style-type: none;
}

</style>

https://jsfiddle.net/y1paacbh/1/

Answer 5

我认为这是你所追求的效果。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.nav {
  background-color: green;
  height: 30%; /* for demo purposes */
}
.nav li {
  display: table-cell;
  vertical-align: middle;
}
.nav ul {
  display: table;
  height: 100%;
}

<div class="nav">
  <ul>
    <li class="navright">Home</li>
    <li class="navright">About</li>
    <li class="navright">Contact</li>
  </ul>
</div>

JSfiddle Demo

Answer 6

body {
  height: 1000px;
}
.nav ul{
  background-color:green;
  height: 10%;
  line-height: 100px;
  width: 100%;
}
.nav li{
  display: inline;
}

<div class="nav">
  <ul>
    <li class="navright">Home</li>
    <li class="navright">About</li>
    <li class="navright">Contact</li>
  </ul>
</div>

Answer 7

我不确定我是否正确地解答了您的问题，但通过这种方式，您可以拥有以下元素： 1）垂直居中和 2）orizzontally分发

.nav {
  background-color:green;
  height: 30px;
  width: 100%;
    }

.nav li {
  margin-left: auto ;
  margin-right: auto ;
  width:33%;
  height:30px;
  display:table-cell;
  vertical-align:middle
}

.nav ul {
  list-style-type: none; /*if you want to remove bullets*/
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  display:table;
  overflow: hidden;
  width:100%;
 }

working Fiddle

Answer 8

这可以通过使用flex来解决。它非常简单，您只需要在父母身上使用两条规则。

align-items:center;
display:flex;

＆＃13;

ul {
  align-items:center;
  display:flex;
  
  background:orange;
  height:100%;
  list-style:none;
  margin:0;
  padding:0;
}

li {
  padding:20px;
}

.nav { height:300px; }

＆＃13;

<div class="nav">
    <ul>
        <li class="navright">Home</li>
        <li class="navright">About</li>
        <li class="navright">Contact</li>
    </ul>
</div>

＆＃13;

垂直对齐div

8 个答案: