CSS 垂直对齐属性无效

Question

我想在 bar class 中将条形文字和按钮中的文本居中。垂直对齐属性是否可行？下面我有一个 link 到我的问题的 codepen 版本。

片段：

.bar {
    display: inline-block;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    font-style: italic;
    font-size: 18px;
    text-align: center;
}
.bartext{
    display: inline-block;
    vertical-align: ;
}
.button1 {
    display: inline-block;
    vertical-align: ;
}

<div class="bar">
  <div class="bartext">This is how you contact us</div>
  <div class="button1">Contact</div>
</div>

Answer 1

您可以使用 CSS Flexbox。将 display: flex 应用到 .bar & 垂直对齐使用 align-items: center.

查看下面的工作代码段，或查看更新后的 Codepen。

.bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    font-style: italic;
    font-size: 18px;
    text-align: center;
}
.bartext{
    display: inline-block;
    vertical-align: ;
}
.button1 {
    margin-left: 5px;
}

<div class="bar">
    <div class="bartext">This is how you contact us</div>
    <div class="button1">Contact</div>
</div>

希望对您有所帮助！

CSS 垂直对齐属性无效

CSS Vertical Alignment Property Not Working

html

css

vertical-alignment

CSS 垂直对齐 属性 无效

CSS Vertical Alignment Property Not Working

html

css

vertical-alignment

CSS 垂直对齐属性无效