css Question posted in
Some basic documentation can be found here.

Css – Centering text with background color

Im currently trying to build a banner with the tagline( 30 years of discovery) to be centered under the title text with a light grey background only around the text. I’m able to have the text centered with a grey background spanning my entire screen. I am also able to have a colored background on just the text as long but without the text being centered on my screen.

.tagline {
  font-weight: 300;
  display: inline-flexbox;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgba(100, 89, 95, 0.75);
}
<div class="tagline">
  <p> 30 Years of Discovery</p>
</div>

I would appreciate any insight that could be offered!

I’ve tried placing <p> in a span, which is where I was able to just have a background color on text. This didn’t allow for me to center the div.

Tags:

3

Answers


  1. 0

    You should use display: inline-block otherwise if it is considered block it is 100% width by default.

    .tagline {
  text-align: center;
}

.tagline p {
  background-color: rgba(100, 89, 95, 0.75);
  display: inline-block;
  padding: 5px;
}
    <div class="tagline">
  <p> 30 Years of Discovery</p>
</div>
    Login or Signup to reply.
  2. 0 
    .tagline {
  font-weight: 300;
  display: inline-flexbox;
  justify-content: center;
  align-items: center;
  text-align: center;
}

p {
  background-color: rgba(100, 89, 95, 0.75);
  width: fit-content;
  margin: 0 auto;
}
    Login or Signup to reply.
  3. 0

    I don’t know if this is what you want but something like this?

    Css:

    .tagline {
  font-weight: 300;
  display: flex;
  justify-content: center;
}

.tagline__text {
  padding: 20px;
  background-color: rgba(100, 89, 95, 0.75);
}

    Html:

    <div class="tagline">
  <p  class="tagline__text"> 30 Years of Discovery</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search