如何在同一行中对齐列标题和联系信息？ [复制]答案

【问题标题】：How can I align a column heading and contact info in same row? [duplicate]如何在同一行中对齐列标题和联系信息？ [复制]
【发布时间】：2022-02-11 22:13:22
【问题描述】：

这可能是个愚蠢的问题，但我被困在这里。

有一张 A4 尺寸的纸，我希望公司名称位于页面中心，并且在同一行中，我希望 WhatsApp 和联系电话一个接一个地对齐。下面附上我的代码。

提前致谢。

.invoice-title {
  font-size: 25px;
  text-align: center;
  font-weight: bold;
  color: #CD1818;
  padding-top: 10px;
}

.invoice-title small {
  font-size: 12px;
  text-align: right;
  padding-top: 10px;
  color: #262a2e;
}

<p class="invoice-title"><span>COMPANY NAME</span>
  <small class="float-right"><i class="fab fa-whatsapp"></i> : 99887766655 \nCall : 5544332211</small>
</p>

【问题讨论】：

你可能不应该在这里使用段落元素。这不是一个段落。我会使用 div 和标题元素作为公司名称。
请查看链接的副本。这里的答案并不理想。

标签： html css

【解决方案1】：

flexbox 很容易。试试这个

.invoice-title{
    font-size: 25px;
    font-weight: bold;
    color: #CD1818;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.invoice-title span {
    margin-left: auto;
}

.invoice-title small{
    font-size: 12px;
    text-align: right;
    color: #262a2e;
    margin-left: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p class="invoice-title">
    <span>COMPANY NAME</span>
    <small>
        <i class="fab fa-whatsapp"></i> : 
        99887766655 <br>Call : 5544332211
    </small>
</p>

【讨论】：

添加图像以使其清晰。请检查。
哪张图片？您的问题最重要的那个？
关闭，但公司名称不在页面中心。

【解决方案2】：

您可以执行以下操作

添加了 <br/> 标记以在您的 html 中添加新行
添加了以下样式

.invoice-title {
  width: 100%;
  border: 1px solid black;
  font-size: 25px;
  text-align: center;
  position: relative;
  padding: 10px;
}

.float-right {
  font-size: 12px;
  position: absolute;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 0;
}

<p class="invoice-title"><span>COMPANY NAME</span>
  <small class="float-right"><i class="fab fa-whatsapp"></i> : 99887766655 <br/>Call : 5544332211</small>
</p>

【讨论】：

段落默认为 100% 宽度（块级），浮动不应与绝对定位结合使用。