How to properly center the text?

Question

I'm trying to center the text in the middle of JQM page, vertically and horizontally. Using 1.4.5, default theme.

In my .css I have:

.splashDiv {
    position: absolute;
    top: 50%;
    height: 50%;
    width: 100%;
    text-align: center;
    padding:0;
}

HTML

<div class="splashDiv" data-role="page">
    Please wait...
</div>

The result is:

The text is vertically centered only if I remove top: 0 directive in developer tools(although not perfectly centered).

My question is what is the proper way according to JQM architecture to have what I want? I am not looking for quick/dirty workaround, unless there is no other way.

UPDATE

The tag jquery-mobile is necessary because I would like to follow the ideology of JQM and not do trick things. I mostly hope there is some data-role or class to help fix this issue. — Pablo, Mar 30 '17 at 19:01
if you need a splash screen before libraries have been loaded, you don't even need to put your div inside a page, put it just as the first element inside the body, with inline styling As soon as jQM has been loaded, i would suggest you to use the jQM Loader with a little bit custom styling — deblocker, Mar 31 '17 at 11:47
@deblocker: that is also great idea, worth to try! thank you :) — Pablo, Mar 31 '17 at 11:57
@deblocker by default, when jQM is loaded, it wraps body's content in ui-page div. Best solution is to initialize jQM manually on `mobileinit` event. Something like this: http://stackoverflow.com/a/26920806/1771795 — Omar, Mar 31 '17 at 21:58
@Omar: great info! I always learn something new from you! BTW, here is a comparison with the loader: https://plnkr.co/edit/WnQuaK15oeMcd7HoTGQW?p=preview — deblocker, Apr 01 '17 at 09:06
@deblocker you're welcome :) I guess the difference is due to page's padding, because jQM loader is a direct child of body. I haven't touched jQM in long time. — Omar, Apr 01 '17 at 19:45

score 2 · Accepted Answer · answered Mar 30 '17 at 19:26

2

Put your splash div within a jQM page instead of making it the page:

<div data-role="page" id="page1">
    <div id="cont" role="main" class="ui-content">
      <div class="splashDiv" >
          Please wait...
      </div>
   </div> 
</div>  

.splashDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

DEMO

answered Mar 30 '17 at 19:26

ezanker

24,628
1
20
35

Now what is separating me from happiness is the top bar, which I don't need on that page. Please see my update screenshot. – Pablo Mar 30 '17 at 19:45
1

@Pablo this is the padding 1em in ui-content, remove it, that's it. – Omar Mar 30 '17 at 20:23
1

@Pablo, Omar is correct. I have updated my demo to remove padding: http://codepen.io/ezanker/pen/bqOGOL – ezanker Mar 30 '17 at 20:31

score 0 · Answer 2 · answered Mar 30 '17 at 18:24

0

.splashDiv {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    padding:0;
}

Use this it will align your text vertically center.

answered Mar 30 '17 at 18:24

Tushar Kotlapure

338
6
14

-50 drives it out of screen. 50 brings it slightly below center, due to padding, coming from JQM's `.ui-content` class and something which is not clear to me. – Pablo Mar 30 '17 at 19:15

Abdul Malek · Answer 3 · 2017-03-30T20:59:28.583

Please Try it. Your HTML

<div data-role="page" id="page1">
    <div id="cont" role="main" class="ui-content">
      <div class="splashDiv" >
        <span>Please wait...</span>
      </div>
   </div> 
</div>

Your CSS

.splashDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    width: 100%;
    text-align: center;
    padding:0;
    overflow: hidden;
    transform: translate(-50%, -50%) 
}
.splashDiv span {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) 
}

DEMO

score -1 · Answer 4 · answered Mar 30 '17 at 17:24

-1

You need to use the following css:

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

answered Mar 30 '17 at 17:24

JordanBarber

2,041
5
34
62

How to properly center the text?

4 Answers4