How can I align a column heading and contact info in same row?

Question

This might be silly question but yet I am stucked here.

There is A4 size paper in which I want Company Name at the center of the page and in the same row I want WhatsApp and contact number right aligned one after another. Below is my code attached.

Thanks in advance.

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

You probably shouldn't be using a paragraph element here. It's not a paragraph. I'd use a div and a heading element for the company name. — isherwood, Feb 11 '22 at 14:04
Please see the linked duplicate. The answers here are not ideal. — isherwood, Feb 11 '22 at 14:08

ruleboy21 · Answer 1 · 2022-02-11T14:13:22.777

1

It's easy with flexbox. Try this

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

edited Feb 11 '22 at 14:13

answered Feb 11 '22 at 13:30

ruleboy21

5,510
4
17
34

Adding an image to make it clear. Please check. – Khushal Feb 11 '22 at 13:49
Which image? The one at the top of your question? – ruleboy21 Feb 11 '22 at 13:51
Close, but the company name isn't centered on the page. – isherwood Feb 11 '22 at 14:05

score 0 · Accepted Answer · edited Feb 11 '22 at 14:01

0

You can do the following

Added a <br/> tag to add a new line on your html
Added the following styles

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

edited Feb 11 '22 at 14:01

isherwood

58,414
16
114
157

answered Feb 11 '22 at 13:54

innocent

864
6
17

Paragraphs are 100% width (block level) by default, and floats shouldn't be used in combination with absolute positioning. – isherwood Feb 11 '22 at 14:03

How can I align a column heading and contact info in same row?

2 Answers2