CODEWITHSUNDEEP
css
Jeeves
Jeeves

Reputation: 127

How to centre pseudo element

I'm trying to create with css a green colored box with a white minus sign in it. I'm trying to get the minus sign to be vertically and horizontally centered within the green box.

I could easily do this by explicity specifying the top and left positions of the pseudo minus sign. However I'm wanting to know if there is another non-explicit way to do this. I was trying text-align and vertical-align. It's not working. Can anyone out there help?

*, *:before, *:after {
    box-sizing: border-box;
}

.container{
  background-color:green;
  display:inline-block;
  height:4em;
  width:4em;
  position:relative;
  text-align:center;
}

.container:before {
  content:"";
  background-color:white;
  display:inline-block;
  height: 0.5em;
  width:2em;
  position:absolute;
  vertical-align:middle;
  
}
<span class="container">

</span>

Upvotes: 1

Views: 106

Answers (3)

ralph.m
ralph.m

Reputation: 14345

*, *:before, *:after {
    box-sizing: border-box;
}

.container{
  background-color:green;
  display:inline-block;
  height:4em;
  width:4em;
  position:relative;
  text-align:center;
}

.container:before {
  content:"";
  background-color:white;
  height: 0.5em;
  width:2em;
  position:absolute;
  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
<span class="container">

</span>

If you're just doing this for modern browsers, you could add this to your .container::before {} styles:

  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);

Upvotes: 2

ketan
ketan

Reputation: 19341

Give left and top value. Because there is position: absolute; for .container::before.

And there is no need of display:inline-block; and vertical-align:middle; then.

*, *:before, *:after {
    box-sizing: border-box;
}

.container{
  background-color:green;
  display:inline-block;
  height:4em;
  width:4em;
  position:relative;
  text-align:center;
}


.container::before {
    background-color: white;
    content: "";
    height: 0.5em;
    left: 50%;
    line-height: 0.5em;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2em;
}
<span class="container">

</span>

Edit:

Another way you can do using display:flex without using left and top value. Which support in all latest browser.

*, *:before, *:after {
    box-sizing: border-box;
}

.container {
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4em;
    height: 4em;
}


.container::before {
    background-color: white;
    content: "";
    height: 0.5em;
    width: 2em;
}
<span class="container">

</span>

Upvotes: 2

Adam Mooz
Adam Mooz

Reputation: 239

You're on the right track, just 2 slight tweaks were needed. Since you used 'em's, this code should also scale nicely.

.container:before {
    content:"";
    background-color:white;
    display:inline-block;
    height: 0.5em;
    width:2em;
    position:absolute;
    top: 1.75em;
    left: 0.5em
}

What I did is push it 1.75em's from the top. Since your block is 4em tall, and the minus is 0.5em's tall, exact middle would be 4em/2 - 0.5em/2 = 2 - 0.25 = 1.75. The same math applies for the left setting: 4em/2 - 2em/2 = 2 - 1 = 1em.

Upvotes: -1

Related Questions