Positioning to the center of hyperlink parent

Question

I have a

hyperlink

that looks like so:

<a id="addNew" class="newEvent" href="/html/addNew.html">

    <label class="add">+</label>    

</a>

The CSS for these:

.newEvent {

    position: fixed;

    bottom: 6vw;    

    right: 6vw;

    height: 10vw;

    width: 10vw;

    border-radius: 50%;

    border-color: transparent;

    background-color: #ce0808;

    box-shadow: 3px 3px 5px #888888;    

    align-content: center;

}



.add {

    font-size: 6vw;

    color: #ffffff;

    position: relative;

}

For no apparent reason the

+

sign is aligned to the left.
Note that I tried those

text-align

,

margin: 0 auto

and so on solutions I found online, but none of them worked, the best I got was center horizontally, but aligned to the top. I require assistance to finally center that

+

sign.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You had ommited the display type. I assume you wanted to use flexbox based on align-items?

.newEvent {
  position: fixed;
  bottom: 6vw;
  right: 6vw;
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  border-color: transparent;
  background-color: #ce0808;
  box-shadow: 3px 3px 5px #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.add {
  font-size: 6vw;
  color: #ffffff;
  position: relative;
}

<a id="addNew" class="newEvent" href="/html/addNew.html">
  <label class="add">+</label>
</a>

Positioning to the center of hyperlink parent

Sign up