Centering span near an image with the respect to the wrapper div

Question

How do I both vertically and horizontally center the span element without using tables?

I need the picture on the left and thereafter the span aligned in center of the wrapper div. The span element should not be aligned in between the img and right side, but the whole div itself.

Fiddle

<div style="height: 100px; background-color:black;color:white;">
  <img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg">
  <span class="hejsa">hej du</span>
</div>

This question has been asked several times before on SO. Have you given them a try? — Hashem Qolami, Nov 08 '14 at 20:05
Tried a bunch, couldn't seem to get it working, just looking for a straight down working code snippet that will allow me to do this, without big position: changes. — Rasmus Hjorth Lüdeking, Nov 08 '14 at 20:06
possible duplicate of [vertical and horizontal align (middle and center) with css](http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css) — cuSK, Nov 08 '14 at 20:12
Hashem, thanks - but not quiet. I need the picture on the left and thereafter the span aligned in center of page. — Rasmus Hjorth Lüdeking, Nov 08 '14 at 20:13
Abdul thx, but this makes the span element align centered in between the img and right side - I need the span centered with respect to the whole site. — Rasmus Hjorth Lüdeking, Nov 08 '14 at 20:15
Nope not at all. Just need support on all up to date browsers. — Rasmus Hjorth Lüdeking, Nov 08 '14 at 20:19

A.B · Answer 1 · 2014-11-08T20:23:05.487

2

Try this

css

div{text-align:center;line-height:100px;position:relative;}
img{position:absolute;left:0}

html

<div style="height: 100px; background-color:black;color:white;"><img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg"><span class="hejsa">hej du</span></div>

fiddle

edited Nov 08 '14 at 20:23

answered Nov 08 '14 at 20:08

A.B

20,110
3
37
71

1

Note that `align` attribute is deprecated since HTML4.01 and obsoleted since HTML5. – Hashem Qolami Nov 08 '14 at 20:12
@AbdulBasit I put your code in a code snippet which runs right on Stack Overflow - why did you move it into a jsfiddle? – Nathan Nov 08 '14 at 20:12
But.. this makes the span element align with respect to the space between left edge and picture. – Rasmus Hjorth Lüdeking Nov 08 '14 at 20:12
@nathan accidently, we were both editing at the same time, how can i go to that again? – A.B Nov 08 '14 at 20:13
@AbdulBasit Oh ok, that's fine :) Just rollback the edit (click "edited x mins ago" and click "rollback" on my edit with code snippet). For more info about code snippets, checkout [this blog post](http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Nathan Nov 08 '14 at 20:14
@RasmusHjorth yes as img also occupies the space, do you want to center it as whole? – A.B Nov 08 '14 at 20:17
Yeah, exactly. Keep the img on the left - BUT center the span with respect to the whole page. – Rasmus Hjorth Lüdeking Nov 08 '14 at 20:17

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

As the OP stated:

I need the span centered with respect to the whole site.

One option could be to position the <span> element absolutely and align the text to the center horizontally and vertically as follows:

Method #1:

Using top/left and transform properties:

.wrapper {
    position: relative;
    height: 100px; background-color:black; color:white;
}

.wrapper > span.hejsa {
    position: absolute;
    top: 50%; left: 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%);
}

<div class="wrapper">
    <img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" />
    <span class="hejsa">
        Lorem ipsum dolor sit amet...
    </span>
</div>

It's worth noting that CSS transform is not supported in IE8 and olders ^{(which is not the OP's concern as s/he mentioned in comments)}

Method #2:

Expanding the absolutely positioned <span> element by top/right/bottom/left properties:

.wrapper {
    position: relative;
    height: 100px; background-color:black; color:white;
}

/* .wrapper > img { position: relative; z-index: 1; } */ /* optional */

.wrapper > span.hejsa {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    line-height: 100px;
    text-align: center;
}

<div class="wrapper">
    <img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" />
    <span class="hejsa">
        Lorem ipsum dolor sit amet...
    </span>
</div>

This method has a wider browser support, however one drawback of it is the text should not be multiline.

just for knowledge, @hashem why use transform and css3 properties when this can be done with css? that will run on old browsers as well? — A.B, Nov 08 '14 at 20:29
@AbdulBasit Just noticed your answer +1 It's better than mine. However I'm not sure if removing the image from normal flow is okay to OP as it could affect the other elements (if any). I'll delete my answer if the OP accepts yours, respectively. — Hashem Qolami, Nov 08 '14 at 20:35
no it is okay i was just learning from your code, problem is solved thats pretty good :) — A.B, Nov 08 '14 at 20:37

Centering span near an image with the respect to the wrapper div

Fiddle

2 Answers2

Method #1:

Method #2: