Question

我的页眉有一个未对齐的<li>元素。这是一个截图：

基本上我想说＆＃34;垂直居中两个元素，一个在左边，另一个在右边＆＃34;。

我能够对齐<li>元素

横向与style="float:right"
垂直与style="vertical-align:middle"。

......但不是在同一时间。基于similar question，我希望这可行：

style="float:right; vertical-align:middle"

它没有。

我还找到了一些方法来对齐整个列表，但这些方法不适用于对齐列表中的单个元素。

以下是相关的html-thymeleaf代码：

    <div th:fragment="header">
        <nav>
            <ul class="navcontainer">
                <li class="navtitle"><a href="/"><h2>Personal Expense Tracker</h2></a></li>

                <li class="navlogout" th:inline="text" style="float:right"><a href="/logout">[[(${user != null ? 'Logout ' + user : ''})]]</a></li>

            </ul>
        </nav>
    </div>

以下是相关的css代码：

nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}

Answer 1

使用您添加的代码..

使用flexbox，您可以这样做：

＆＃13;

nav {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  display: block;
  margin: 0;
  overflow: hidden;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}

nav ul li {
  margin: 0;
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav > ul > li > a:hover {
  background-color: #111;
}

＆＃13;

<div th:fragment="header">
  <nav>
    <ul class="navcontainer">
      <li class="navtitle"><a href="/"><h2>Personal Expense Tracker</h2></a></li>

      <li class="navlogout" th:inline="text" ><a href="/logout">Log out</a></li>

    </ul>
  </nav>
</div>

＆＃13;

Answer 2

问题有点模糊。如果你可以给我一个你的问题的视觉/你正在寻找什么，我可能会帮助更多。

无论如何，这是将元素水平和垂直对齐到其父元素的经典方法。

祝你好运！

＆＃13;

.container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 50%;
  max-width: 1000px;
  height: 100px;
  background: grey;
}

.element {
  position: absolute;
  display: block;
  width: 50%;
  height: 50px;
  background: red;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25%;
}

＆＃13;

<ul class="container">
  <li class="element"></li>
</ul>

＆＃13;

Answer 3

您应该将height或line-height提供给元素（或者在某些情况下，父元素没有高度），因此vertical-align:middle将无效，因为没有高度。首先给你想要垂直设置的元素的高度，如果不起作用，给父元素赋予高度。

CSS：垂直和水平对齐列表元素

3 个答案: