Centering content

[Samuel_G_1]

I have this:

                    <div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0" style="margin-left:-20px">
                        
                        <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0" style="width:100%">
                            
                            <div class="widget-container content-area vertical-col">

                                <div class="widget uib_w_11 " data-uib="media/img" data-ver="0">
                                    
                                    <img src="images/compass.png" width="300px" height="300px" id="compassImg" >

                                    <canvas id="needleCanvas" width="300px" height="300px" style="position:absolute;top:0px;left:0px;z-index:1000;"></canvas>
                                    <img src="images/needle.png" width="300px" height="300px" id="needleImg" style="position:absolute;top:0px;left:0px;display:none;">
                                    
                                </div><span class="uib_shim"></span>
                            </div>
                           
                        </div>
                        <span class="uib_shim"></span>
                    </div>

How can I 'center' the content? If I add 'center' tags around all this, then the 'needleCanvas' is not centered due to the position:absolute...but I need that to be able to put the needle on top of the compassImg.

[Amrita_C_Intel]

Hello,

This Link might be helpful-

http://stackoverflow.com/questions/29967978/position-a-row-at-center-in-xdk

[Samuel_G_1]

Amrita C. (Intel) wrote:

Hello,

This Link might be helpful-

http://stackoverflow.com/questions/29967978/position-a-row-at-center-in-xdk

How would I use that? Everytime I put the <center> tags, the Canvas stays positioned absolutely....

[Brandon_K_Intel]

How did you construct your HTML? Are you using App Designer?

[Chris_P_Intel]

Forget <center>  and the like.  Yikes.

In the Design view, find the 'Column' that is the parent to your image. Bring up its properties.

You can choose center alignment there.  

And, if the Column has exactly one child, you can vertically center that child too