Html 垂直定心

我有一个问题，使我的标志和链接垂直对齐。我曾尝试使用内联块和

vertical align

设置为

middle

来实现这一点，但没有成功

我知道我可以使用flex box实现这一点。但我不想使用flex box。如果我必须使用flex，flex box在实现正确对齐方面是否更好

如果您有任何帮助，我们将不胜感激

.header{
填充：20px；
背景：#000；
颜色：#fff；
}
标志
保险商实验室{
显示：内联块；
垂直对齐：中间对齐；
}
保险商实验室{
列表样式：无；
浮动：对；
}
ulli{
显示：内联块；
}

XCode

帐户设置
侧面图
注销

在许多浏览器中，

ul

元素具有默认的上下页边距

铬：

这些边距偏离了垂直居中。把它们取下来

.header{
填充：20px；
背景：#000；
颜色：#fff；
}
.标志，ul{
显示：内联块；
垂直对齐：中间对齐；
}
保险商实验室{
边距：0；/*新*/
列表样式：无；
浮动：对；
}
ulli{
显示：内联块；
}

XCode

帐户设置
侧面图
注销

在许多浏览器中，

ul

元素具有默认的上下页边距

铬：

这些边距偏离了垂直居中。把它们取下来

.header{
填充：20px；
背景：#000；
颜色：#fff；
}
.标志，ul{
显示：内联块；
垂直对齐：中间对齐；
}
保险商实验室{
边距：0；/*新*/
列表样式：无；
浮动：对；
}
ulli{
显示：内联块；
}

XCode

帐户设置
侧面图
注销

您可以查看Bulma，特别是它们的属性。这在后台使用flexbox，但您不必学习它-只需简单易用的类

<!-- Main container -->
<nav class="level">

    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5">Content</p>
        </div>

    </div>

    <!-- Right side -->
    <div class="level-right"> 
        <p class="level-item">More Content</p> 
        <p class="level-item"><a class="button is-success">New</a></p>
    </div>
</nav>

内容

更多内容
新建

您可以查看Bulma，特别是它们的属性。这在后台使用flexbox，但您不必学习它-只需简单易用的类

<!-- Main container -->
<nav class="level">

    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5">Content</p>
        </div>

    </div>

    <!-- Right side -->
    <div class="level-right"> 
        <p class="level-item">More Content</p> 
        <p class="level-item"><a class="button is-success">New</a></p>
    </div>
</nav>

内容

更多内容
新建

在某些浏览器中，

元素默认有边距

试一试

---

删除默认页边距。

在某些浏览器中，

元素默认具有页边距

试一试

---

删除默认页边距。

页边距：0；我会帮助你的

ul {
  list-style: none;
  float: right;
  margin: 0;
}

---

边际：0；我会帮助你的

ul {
  list-style: none;
  float: right;
  margin: 0;
}

.header{
填充：20px；
背景：#000；
颜色：#fff；
}
标志
保险商实验室{
显示：内联块；
垂直对齐：中间对齐；
}
保险商实验室{
列表样式：无；
浮动：对；
保证金：0自动；
}
ulli{
显示：内联块；
}

XCode

帐户设置
侧面图
注销

.header{
填充：20px；
背景：#000；
颜色：#fff；
}
标志
保险商实验室{
显示：内联块；
垂直对齐：中间对齐；
}
保险商实验室{
列表样式：无；
浮动：对；
保证金：0自动；
}
ulli{
显示：内联块；
}

XCode

帐户设置
侧面图
注销

可能重复的不是同一个问题可能重复的不是同一个问题。非常感谢，我收到了。非常感谢，太好了