1

Can you please tell me how to vertically align the span inside the div?

Please see css and html below:

div {
    position: relative;
    margin: 1rem 0;
    overflow: hidden;
}

span {
    top: 0;
    right: 0;
    font-size: 12rem;
    top: 50%;
    transform: translateY(-50%);
}

<div>
  <span></span>

  ...
  ...
  ...
</div>
h3110
  • 55
  • 9
  • how to center it if you set it to 100% height? – Temani Afif Oct 31 '19 at 09:40
  • There are lots of different ways to center something in the middle but it depends on what will work best for you and how you want it to interact with the content around it. Using Flex is a good way. You are currently using position absolute so yous span will need a clear height and width to position inside the middle. – Andrew Oct 31 '19 at 09:43
  • You can also use transform to vertically align an item:- https://codepen.io/mrcow/pen/hGHsg – Andrew Oct 31 '19 at 09:46
  • if I add 'transform: translateY(-50%);' and updated the code above, which works fine but when the div grows vertically, the span does not move and is not vertically aligned. – h3110 Oct 31 '19 at 10:14

0 Answers0