How to align SPAN inside a DIV vertically and horizontally

Question

I have the following HTML code:

<div id="slideClick">
    <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;">
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

CSS:

.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}
#slideClick {
    float:left;
    height:90px;
    width:40px;
    background:#EE8D40;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    text-align: center;
}

Displays this:

enter image description here

How can I center the SPAN horizontally and vertically inside the blue DIV?

This is one of the most answered questions on SO.... http://stackoverflow.com/questions/21577730/vertical-align-span-inside-div or http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css — LcSalazar, Aug 21 '14 at 13:10
Also http://stackoverflow.com/questions/22394526/vertical-and-horizontal-alignment-of-text-with-css — TylerH, Aug 21 '14 at 13:12
@TylerH **NO** this is different. OP wants to align the transformed element and not the regular flow element. — Mr. Alien, Aug 21 '14 at 13:12
@SearchForKnowledge your approach is incorrect. You should transform your whole element and not just the text. — Mr. Alien, Aug 21 '14 at 13:13
@Mr.Alien Sure it is. Just do as you said; align it first then transform the whole thing. http://jsfiddle.net/89eu7xvv/1/ — TylerH, Aug 21 '14 at 13:30

Paullo · Accepted Answer · 2014-08-21T13:26:49.500

I have created a JSFiddle Which could be what you want

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

I have created a JSFiddle Which could be what you want

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>


.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}

#slideClick {
    float:left;
    height:190px;
    width:200px;
    background:#EE8D40;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

Yes it should be, but you will need crosscheck that, I dont have a windows pc to test that but I have included -ms-..... to take care of IE — Paullo, Aug 21 '14 at 13:24
Although it is a lot of CSS code but I was able to tweak your code a bit and make it work. Thank you. — SearchForKnowledge, Aug 21 '14 at 14:32
Okay, where you able to test for the IE? I might setup a Windows Virtual Box for windows related testing. Congrats anyways :) — Paullo, Aug 21 '14 at 14:41
It is working... 95% of the way for IE but no biggie. It is a small issue. Thank you — SearchForKnowledge, Aug 21 '14 at 14:44

Erik Svedin · Answer 2 · 2014-08-21T13:59:19.213

1

AS stated above this is a common problem in CSS, hovever i see the tricky part when you're rotating only the text span. Rotate the wrapper element and from there centering should be pie.

#slideClick{
  -webkit-transform: rotate(90deg);
}

For example with line-height since height is set.

jsfiddle: http://jsfiddle.net/1vnbyL1t/3/

edited Aug 21 '14 at 13:59

answered Aug 21 '14 at 13:17

Erik Svedin

1,286
12
26

score 1 · Answer 3 · answered Aug 21 '14 at 13:19

1

Since your div has a fixed size, you can use a relative position for the inner span :

position:relative;
top:35px;
right:17px;

and just adjust it accordingly : http://jsfiddle.net/38dgooxj/2/

answered Aug 21 '14 at 13:19

ovi

566
4
17

I adjusted my code to match yours but for some reason the text is outside of the orange box in IE8 :/ – SearchForKnowledge Aug 21 '14 at 13:25
1

Try `left:10px` instead of right, and if it is not working, continue making changes until it does :) – ovi Aug 21 '14 at 13:29
Thank you. I upvoted for now :) – SearchForKnowledge Aug 21 '14 at 13:30

How to align SPAN inside a DIV vertically and horizontally

3 Answers3