How do i specify the width of an element and center it in its parent element?

Question

.service-info p {
  padding: 100px 0;
  font-weight: 500;
  color: red;
  width: 50%;
}

.service-info {
  text-align: center;
  place-content: center;
  position: relative;
  width: min(95%, 70rem);
}

<!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>
<body>
  <div class="service-info">
    <h1>servces</h1>
    <p>lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.</p>
  </div>
</body>
</html>

So... as you can see here, i've specified the width of the parent element,But i want the paragraph to be in the middle of the webpage while it's width is specified. I've tried it but didn't work, once i text align the paragraph specify it's width, it shifts to the left. I want to centerly align the paragraph text while it has a specific width. Do i use flex or is there something i'm missing?

score 1 · Answer 1 · answered Jun 27 '22 at 01:21

You can add margin: 0 auto; on the <p> tag. Paragraphs are block-level elements and having text-align: center on the parent only aligns inline elements.

If you need to center the paragraph both vertically and horizontally then you will need to use flex on the parent container.

.service-info p {
  padding: 100px 0;
  font-weight: 500;
  color: red;
  width: 50%;
  margin: 0 auto;
}

.service-info {
  text-align: center;
  position: relative;
  width: min(95%, 70rem);
}

<!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>
<body>
  <div class="service-info">
    <h1>servces</h1>
    <p>lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.</p>
  </div>
</body>
</html>

score 1 · Answer 2 · answered Jun 27 '22 at 02:08

1

There are 2 solutions to your problem:

1. Using Flexbox

.service-info p {
   padding: 100px 200px;
   font-weight: 500;
   color: red;
 }

.service-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
 }

Codepen

2. Using standard CSS

.service-info p {
  padding: 100px 0;
  font-weight: 500;
  color: red;
  width: 50%;
  margin: 0px auto; /*Add this*/
}

.service-info {
  text-align: center;
  place-content: center;
  position: relative;
  width: min(95%, 70rem);
}

Codepen

answered Jun 27 '22 at 02:08

Anubhav Munjaal

72
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 27 '22 at 07:05

score 0 · Accepted Answer · answered Jun 27 '22 at 01:13

0

You can try with display: flex; in .service-info

answered Jun 27 '22 at 01:13

Théophile Wallez

451
3
15

score 0 · Answer 4 · answered Jun 27 '22 at 01:37

Use this code:

.service-info {
  position: relative;
  height: 260px;
  width: 360px;
  background-color: beige;
  text-align: center;
  justify-content: center;
}
.service-info h1{
  margin: 0;
}
.service-info p {
  margin: 0;
  padding: 30px 30px;
  font-weight: 500;
  color: red;
}

  <div class="service-info">
    <h1>servces</h1>
    <p>lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.</p>
  </div>

How do i specify the width of an element and center it in its parent element?

4 Answers4