Text align in center

Question

I'm trying to get the numbers in the middle of the box I tried a lot and a lot but couldn't do it Please Help I'll attach a picture of what I'm trying to come up with, a picture of what I made and the code I used

my code

what i made

What am I looking at

p {
    background-color: #eee;
    padding: 15px;
    margin: 10px;
    width: 600px;
    float: left;
    position: relative;
    left: 50px;
    counter-increment: num;
    
}

p::after {
    content: "";
    width: 5px;
    height: 100%;
    background-color: tomato;
    position: absolute;
    right: -5px;
    top: 0%;
}
p::before {
content: counter(num);
position: absolute;
background-color: tomato;
width: 50px;
height: 50px;
left: -40px;
top: 0px;
margin-top: ;
text-align: center;
font-weight: bold;
color: white;
}

    <p class="a">This Is Very Very Long Product Title</p>
    <p class="b">This Is Very Very Long Product Title</p>
    <p class="c">This Is Very Very Long Product Title</p>
    <p class="d">This Is Very Very Long Product Title</p>
    <p class="e">This Is Very Very Long Product Title</p>
    <p class="f">This Is Very Very Long Product Title</p>

Add `line-height: 50px` in `p::before` – Minal Chauhan Aug 27 '21 at 09:02 — Minal Chauhan, Aug 27 '21 at 09:02

score 0 · Answer 1 · answered Aug 27 '21 at 09:04

You add use flexbox for that in p:before like this:

p:before {
  display:flex;
  align-items: center;
  justify-content: center;
}

Or If the content is not too long add line-height in p:before like this:

p:before {
  line-height: 50px
}

p {
  background-color: #eee;
  padding: 15px;
  margin: 10px;
  width: 600px;
  float: left;
  position: relative;
  left: 50px;
  counter-increment: num;    
}

p::after {
  content: "";
  width: 5px;
  height: 100%;
  background-color: tomato;
  position: absolute;
  right: -5px;
  top: 0%;
}
p::before {
  content: counter(num);
  position: absolute;
  background-color: tomato;
  width: 50px;
  height: 50px;
  left: -40px;
  top: 0px;
  margin-top: ;
  text-align: center;
  font-weight: bold;
  color: white;
  display:flex;
  align-items: center;
  justify-content: center;
}

<p class="a">This Is Very Very Long Product Title</p>
<p class="b">This Is Very Very Long Product Title</p>
<p class="c">This Is Very Very Long Product Title</p>
<p class="d">This Is Very Very Long Product Title</p>
<p class="e">This Is Very Very Long Product Title</p>
<p class="f">This Is Very Very Long Product Title</p>

score 0 · Answer 2 · answered Aug 27 '21 at 09:07

Just add line-height in p::before.

p {
    background-color: #eee;
    padding: 15px;
    margin: 10px;
    width: 600px;
    float: left;
    position: relative;
    left: 50px;
    counter-increment: num;
    
}

p::after {
    content: "";
    width: 5px;
    height: 100%;
    background-color: tomato;
    position: absolute;
    right: -5px;
    top: 0%;
}
p::before {
line-height: 50px;
content: counter(num);
position: absolute;
background-color: tomato;
width: 50px;
height: 50px;
left: -40px;
top: 0px;
margin-top: ;
text-align: center;
font-weight: bold;
color: white;
}

    <p class="a">This Is Very Very Long Product Title</p>
    <p class="b">This Is Very Very Long Product Title</p>
    <p class="c">This Is Very Very Long Product Title</p>
    <p class="d">This Is Very Very Long Product Title</p>
    <p class="e">This Is Very Very Long Product Title</p>
    <p class="f">This Is Very Very Long Product Title</p>

score 0 · Answer 3 · answered Aug 27 '21 at 09:09

The issue is with content of p::before. Flex implementation can quickly solve this.

Add display: flex; align-items: center; justify-content: center; to p::before

p {
  background-color: #eee;
  padding: 15px;
  margin: 10px;
  width: 600px;
  float: left;
  position: relative;
  left: 50px;
  counter-increment: num;

}

p::after {
  content: "";
  width: 5px;
  height: 100%;
  background-color: tomato;
  position: absolute;
  right: -5px;
  top: 0%;
}

p::before {
  content: counter(num);
  position: absolute;
  background-color: tomato;
  width: 50px;
  height: 50px;
  left: -40px;
  top: 0px;
  text-align: center;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

<p class="a">This Is Very Very Long Product Title</p>
<p class="b">This Is Very Very Long Product Title</p>
<p class="c">This Is Very Very Long Product Title</p>
<p class="d">This Is Very Very Long Product Title</p>
<p class="e">This Is Very Very Long Product Title</p>
<p class="f">This Is Very Very Long Product Title</p>

Text align in center

3 Answers3