CODEWITHSUNDEEP
csswindows-8winjs
João Louros
João Louros

Reputation: 2760

How can I center an element on a Windows 8 [HTML5/JS/CSS3] using flexible layouts

I am building a Windows 8 App in HTML5 and I am trying to center my app menu right in the middle of the screen. I know there are new CSS3 to apply this functionality, by using flexible boxes, however I am not able to recreate that. Here is my HTML

<body>
<div id="playControl">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div>
</body>

There is some information here, but looks like isn't working properly (I guess they changed the property names)

Thanks

Upvotes: 0

Views: 626

Answers (2)

Jeremy Foster
Jeremy Foster

Reputation: 4763

Here's how I do that. I use a grid instead of a flexbox at all. Let's say your div is inside a div called "parent". I would use...

#parent {
    display:-ms-grid;
    -ms-grid-columns:1fr;
    -ms-grid-rows:1fr;
    height:100%;
}

And then on your div I would use...

#yourDiv {
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}

Notice that you need to give the parent div a single row and column and a height of 100%. Then you need to set the alignment for the child div (the initial value is 'stretch'). Hope that helps.

Upvotes: 6

Jeff Brand
Jeff Brand

Reputation: 5633

Brute force example... use css styles in real implementation...

You can fill the page with a flexbox like this... (note I used the default ms-flexbox css style to get things started and overrode with inline styling to get what I wanted)

<div class="ms-flexbox" style="width: 100%; height: 100%; -ms-flex-direction: column; -ms-flex-align: center; -ms-flex-pack: center;">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div>

or your could create a 3x3 grid and put a smaller flexbox inside the middle cell.

Upvotes: 1

Related Questions