CSS - div centralized and son on left-CodePudding

I need to replicate this prototype using HTML and CSS, but I am having trouble trying to align the items. Here is a simple example of what is my goal.

I used display: flex and justify content: center to centralize the parent div. Then, I need to set p to the left of the centralized div. I tried to use margin-right: auto at p,but this is what I got.

Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .wrap {
    display: flex;
    justify-content: center;
    border: red 5px solid;
  }

  p {
    display: flex;
    margin-right: auto;
    color: blue
  }
</style>

<body>
  <div >
    <p>lorem ipsum</p>
  </div>
</body>

</html>

Can someone help me? Thank you!

CodePudding user response：

You need to have display: flex for body which is the wrapper of wrap that would help you centralize the wrap element.

p element is naturally on the left side, so you don't need to use any flexbox.

The last part is you have to set a fixed size for wrap (width and height) to avoid stretching.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>

   body {
     display: flex;
     justify-content: center;
     border: 2px solid purple;
     min-height: 100vh;
     min-width: 100vw;
   }     

  .wrap {
    border: red 5px solid;
    width: 200px;
    height: auto;
    margin: 50px auto auto;
  }

  p {
    color: blue;
  }
</style>

<body>
  <div >
    <p>lorem ipsum</p>
  </div>
</body>

</html>

CodePudding user response：

Try to use position: absolute; with left: 100% on the son. Then use position: relative; on the father.