CODEWITHSUNDEEP
cssjquery-mobile
Pablo
Pablo

Reputation: 29519

How to properly center the text?

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:

enter image description here

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

enter image description here

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

enter image description here

Upvotes: 1

Views: 86

Answers (4)

Abdul Malek
Abdul Malek

Reputation: 1

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

Upvotes: 0

ezanker
ezanker

Reputation: 24738

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

Upvotes: 2

Tushar Kotlapure
Tushar Kotlapure

Reputation: 338

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

Use this it will align your text vertically center.

Upvotes: 0

JordanBarber
JordanBarber

Reputation: 2101

You need to use the following css:

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

Upvotes: -1

Related Questions