Question

我试图让<div>中的文字排成一行。要么将文本设为vertical-align: middle，要么将其放在底部。现在，＆＃39;由...：＆＃39;文字最后排列在“完成任务”的顶部。按钮。

<div style="display: inline-block;width: 100%;height: 25px;vertical-align: middle;">
    <div style="display: inline-block;vertical-align: middle;">
        Due by: 02/12/2016
    </div>
    <div style="display: inline-block; 
            float: right; margin-right: -10px; vertical-align: middle;">
        <div class="eed-button-grn button-space submit_link">Finish Task</div>
    </div>
</div>

Fiddler Link

Answer 1

快速解决方案，添加line-height属性：

<div style="display: inline-block;vertical-align: middle; line-height:28px;">
  Due by: 02/12/2016
</div>

不确定这是否是最佳/最佳方式。

以下是fiddle

Answer 2

与flexbox垂直对齐。这是最简单的方法。

<div style="display: flex; justify-content: center; flex-direction: column; width: 100%; background: red; height: 250px;">
     <div class="cnt">
          <div style="display: inline-block;">
               Due by: 02/12/2016
          </div>
          <div style="display: inline-block; float: right; margin-right: 10px; vertical-align: middle;">
               <div class="eed-button-grn button-space submit_link">Finish Task</div>
          </div>
     </div>
</div>

Answer 3

尝试将以下样式应用于文本元素：

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

试图在div中排列底部文本

3 个答案: