How can I center text in an element?

Question

How can I center text in an element?

66 views Asked by Benjamin Johnson At 03 October 2022 at 15:49

I need to figure out how to align the text within the border I have created. I have tried text alignment, recreating the border, & research. all I need to do is literally extend the border and center the text.

If anyone could help me figure this out it will be much appreciated. No JavaScript allowed.

<section>
  <div class="container">
    <div class="teams">
      <p style="position: relative; left: 15px;color: white;position:relative; 
            top:164px;border: 2px solid #5a5c5c; width:24.9%; height:4.9ch; border- 
           style:outset;font-family: cursive;">CodePen for <b style="font-size: 20px">TEAMS</b></p>

    </div>

    <div class="education">
      <p style="position: relative; left: 380px;color: white; 
            position:relative;top:112px; border:2px solid #5a5c5c; width: 23.2%;height: 4.9ch; 
            border-style:outset; font-family: cursive;">CodePen for <b style="font-size: 
            20px">EDUCATION</b></p>
    </div>

    <div class="privacy">
      <p style="position: absolute; left: 702px;color:white;position: absolute; 
            bottom: 10%; border:2px solid #5a5c5c; width: 22.2%;height: 4.9ch; border-style:outset;  
            font-family: cursive;">CodePen for <b style="font-size: 20px">PRIVACY</b></p>
    </div>

    <div class="writing">
      <p style="position: absolute; left: 1010px;color:white;position: absolute; 
            bottom: 10%; border:2px solid #5a5c5c; width: 25.7%; height: 4.9ch; border-style:outset;  
            font-family: cursive;">CodePen for <b style="font-size: 20px">WRITING</b></p>
    </div>
  </div>
</section>

Original Q&A

There are 1 answers

**OKi** · Answer 1 · 2022-10-03T16:20:56+00:00

To run your code I had to refactor it first: you missed some closing tags, border- style replaced with border-style without space. After that I added text-align: center and it worked :)

Also, I added the missing <b> tag around TEAMS.

Moreover, there is no need to repeat CSS rules, so I removed duplicated position: relative.

P.S. To make the white text visible I added a body with a gray background.

<body style="background-color: gray">
  <div class="container">
    <div class="teams">
      <p
        style="
          position: relative;
          left: 15px;
          top: 164px;
          color: white;
          border: 2px solid #5a5c5c;
          width: 24.9%;
          height: 4.9ch;
          border-style: outset;
          font-family: cursive;
          text-align: center;
        "
      >
        CodePen for <b style="font-size: 20px">TEAMS</b>
      </p>

      <div class="education">
        <p
          style="
            position: relative;
            left: 380px;
            color: white;
            top: 112px;
            border: 2px solid #5a5c5c;
            width: 23.2%;
            height: 4.9ch;
            border-style: outset;
            font-family: cursive;
            text-align: center;
          "
        >
          CodePen for <b style="font-size: 20px">EDUCATION</b>
        </p>
      </div>

      <div class="privacy">
        <p
          style="
            position: absolute;
            left: 702px;
            color: white;
            bottom: 10%;
            border: 2px solid #5a5c5c;
            width: 22.2%;
            height: 4.9ch;
            border-style: outset;
            font-family: cursive;
            text-align: center;
          "
        >
          CodePen for <b style="font-size: 20px">PRIVACY</b>
        </p>
      </div>

      <div class="writing">
        <p
          style="
            position: absolute;
            left: 1010px;
            bottom: 10%;
            color: white;
            border: 2px solid #5a5c5c;
            width: 25.7%;
            height: 4.9ch;
            border-style: outset;
            font-family: cursive;
            text-align: center;
          "
        >
          CodePen for <b style="font-size: 20px">WRITING</b>
        </p>
      </div>
    </div>
  </div>
</body>

TechQA.

How can I center text in an element?

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in CENTERING

Related Questions in ADJUSTMENT

Popular Questions

Popular Tags

Trending Questions