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

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

how both vertically , horizontally center span element without using tables?

i need image on left , thereafter span aligned in center of wrapper div. span element should not aligned in between img , right side, whole div itself.

fiddle

class="snippet-code-html lang-html prettyprint-override"><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>

as op stated:

i need span centered respect whole site.

one alternative position <span> element absolutely , align text center horizontally , vertically follows:

method #1:

using top/left , transform properties:

class="snippet-code-css lang-css prettyprint-override">.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%); } class="snippet-code-html lang-html prettyprint-override"><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 down amet... </span> </div>

it's worth noting css transform not supported in ie8 , olders (which not op's concern s/he mentioned in comments)

method #2:

expanding absolutely positioned <span> element top/right/bottom/left properties:

class="snippet-code-css lang-css prettyprint-override">.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; } class="snippet-code-html lang-html prettyprint-override"><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 down amet... </span> </div>

this method has wider browser support, 1 drawback of text should not multiline.

html css vertical-alignment