Question

我想将文本置于 bar 类的bartext和button中。这是否可以使用垂直对齐属性？下面我有一个指向我的问题的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＆amp;对于垂直对齐，请使用align-items: center。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

希望这有帮助！

CSS垂直对齐属性不起作用

1 个答案: