agiro agiro - 1 year ago 79
CSS Question

Positioning to the center of hyperlink parent

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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download