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

<body>    
    <div >
        <p>Love<br>
        Robots
        </p>
    </div>
</body>

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

Result will be:

begin|    cen|ter    |end

          Love
          Robots
          Another Text

Not like:

begin|    cen|ter    |end

            Love
           Robots
        Another Text

CodePudding user response：

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 >
    <div >
      <p>Love<br> Robots
      </p>
    </div>
  </div>
</body>

CodePudding user response：

Use flex with justify-content: center like below

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

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

<div >
  <p>Love<br> Robots
  </p>
</div>