Text Align Center in Inline

Question

I have a "p" tag and it's inline, (I don't want to display it block) But when I use text-align: center; it doesn't work.

HTML:

<p class="center-align"></p>

CSS:

display: inline

Answer 1

Making a <p> tag inline makes little sense. A <p> element represents a paragraph, and a paragraph is always a block of text separated from other blocks of text. Additionally, you can't place a paragraph inside another paragraph, so I'm not even sure what the <p> tag would be inline to (what parent element would be wrapped around it?).

You should almost certainly be using a <span> for a basic inline element, or one of the hosts of auxiliary inline elements, like <strong>, <em>, <small>, <q> etc.

More importantly, making text centered inside an inline tag makes little sense either. An inline element stretches to take up the width of its content, and wraps the content inside its parent. What would the text be centered to?

---

On that note, you can do a few things:

• If the priority is having space between the background of the block and your text, you can add some padding-inline to add some space around the text inside your block. Again, consider changing from a <p> to something else.

.a {
  display: block;
}

.b {
  display: inline;
  background-color: lightgrey;
  padding-inline: 20px;
}

<p class="a">
    Lorem ipsum dolor sit amet consectetuer 
    adipiscing elit sed at turpis vitae velit euismod 
    aliquet pellentesque et arcu nullam. Venenatis 
    gravida orci pellentesque et arcu nam pharetra 
    vestibulum viverra varius enim nam laoreet dui 
    sed magna nunc in.
      <span class="b">Turpis ac lacus eleifend 
          sagittis pellentesque ac turpis aliquam 
          justo lectus iaculis a auctor sed congue 
          in nisl aenean luctus. Vulputate turpis 
          mauris urna sem suscipit vitae dignissim 
          id ultrices sed nunc phasellus nisi metus 
          tempus sit amet ultrices ac porta. Nec 
          felis quisque male suada.
      </span>
    Nulla sed pede volutpat pulvinar sed non ipsum 
    mauris et dolor pellentesque suscipit accumsan 
    massa in. Consectetuer lorem eu lobortis egestas 
    velit odio imperdiet eros sit amet sagittis nunc 
    mi ac neque nulla blandit justo a metus ut venenatis.
</p>

• If the priority is having the text be centered, you can change your display to block and set the text to center align.

Answer 2

By default <p> tag is block element. The <p> tag is meant for specifying paragraphs of text. If you don't want the text to start on a new line, I would highly suggest you're using the <p> tag incorrectly.

Use the <span> tag instead of <p> tag to achieve your goal.

Anyway, remove the display: inline & add text-align: center

Change your code:

HTML:

<p class="center-align">Just a text</p>

CSS:

.center-align {
  text-align: center
}