How to align a span element inside a div?

Question

UPDATE about duplicated question: it is not the same question since I can not set the height of the containter div.

How to horizontally and vertically align a span element inside a div.

The div is resposive element, so it can takes several sizes. The span has not set height nor the width

<div class="the-div">
   <span class="the-span" >span here</span>
</div>

I tried with:

.the-span{top: 50%; text-align: center}

I don't want to use js for this.

Capture: enter image description here

Have you tried adding `text-align:center` to the div class `the-div` ? — Lee, May 08 '15 at 09:08
yes, I need to center the span inside the div, horizontally and vertically — JPashs, May 08 '15 at 09:08
@Lee yes, that works for horizontally. But I can't get the vertically alignment. — JPashs, May 08 '15 at 09:09

SW4 · Answer 1 · 2015-05-08T09:11:54.300

2

You can transform its position thusly:

html,
body {
  width: 100%;
  height: 100%;
}
div,
span {
  width: 50%;
  height: 50%;
  border: 1px solid;
  display: block;
  position: relative;
}
span {
  transform: translateY(-50%) translateX(-50%); /* <--offset top/left by half its own height/width */
  left: 50%; /* position half way within containing div */
  top: 50%; /* position half way within containing div */
}

<div>
  <span>
  </span>
</div>

edited May 08 '15 at 09:11

answered May 08 '15 at 09:08

SW4

69,876
20
132
137

1

cleaner markup than what I had :) – jbutler483 May 08 '15 at 09:10
@jbutler483 but in production OP has to use the markup which you posted because this is only good for demos and not real world – Mr. Alien May 08 '15 at 09:15
I can't get it working, I run your code and not working... look my capture I uploaded to the question. – JPashs May 08 '15 at 09:18
I can not set the width and heigh for the div container. It is a responsive element. – JPashs May 08 '15 at 09:21
@JPashs: In order for the `transform` property to work, you will require prefixing :) – jbutler483 May 08 '15 at 09:23

How to align a span element inside a div?

1 Answers1