CODEWITHSUNDEEP
htmlcss
gelerum
gelerum

Reputation: 186

Center <p> in <div> with left alignment?

<body>    
    <div class="about">
        <p>Love<br>
        Robots
        </p>
    </div>
</body>

I want to make Love Robots with left alignment, but in the center of whole page

Like text and headers in this site: https://deadblog.ru/webdev/vyravnivanie-div-blokov-po-centru-css/

Result will be:

begin|    cen|ter    |end

          Love
          Robots
          Another Text

Not like:

begin|    cen|ter    |end

            Love
           Robots
        Another Text

Upvotes: 2

Views: 72

Answers (2)

kiranvj
kiranvj

Reputation: 34147

Use flex with justify-content: center like below (for single child)

.about {
  display: flex;
  justify-content: center;
}


.about {
  display: flex;
  justify-content: center;
}
<div class="about">
  <p>Love<br> Robots
  </p>
</div>

For multiple child elements

.about {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  justify-content: center;
}


/* incase if you need to remove default spacing */

.about p {
  padding: 0;
  margin: 0;
}
<div class="container">
  <div class="about">
    <p>Love<br> Robots
    </p>
    <p>Love<br> Robots again
    </p>
  </div>
</div>

Upvotes: 2

Austin
Austin

Reputation: 2265

Surround your original div with another one, and adjust the css for .about to match this:

.center {
  text-align: center;
}

.about {
  display: inline-block;
  text-align: left;
}
<body>
  <div class="center">
    <div class="about">
      <p>Love<br> Robots
      </p>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions