locked
Centering text and using % in CSS3

    Question

  • I've been trying for more than one hour to solve this very simple problem, and I think that it's enough now.

    I just started to build this new application and it should be like this: 3 rows (maybe of div's) and only one column. The rows should be like 20%, 50% and 30% of the total screen (height). The Width should just be 100% in all of them, so that's pretty cool.

    The first problem I met is that I don't think it's possible to use the % in CSS in the way that I want to. I used blend to see how it worked, and I got a shocking result. If I pulled my box like from one side to another was the width set to like 266% ???? I thought to whole screen would be 100%, but it wasn't. I thought that it maybe just was the parents width that it was count by, but the parents size was set to 100% by me, and filled to whole screen? So that's the first question.

    The second is how can I center my <h1> ? I can't use <center> - so I used "text-align: center;" - and that worked fine. Except for the fact that, I wasn't able to set it to be centered for the whole screen. It only centered it in my little <h1>-"box" - which has the width from the text size, so it didn't really center at all. The problem is again that I don't just can set "width: 100%".

    So here is the two problems again:

    How can I split the main content up in 3 boxes of 20%, 50% and 30% - I really want to use -ms-grid-box.

    And how can I center the text in <h1> ?

    Monday, April 22, 2013 3:15 PM

Answers

  • Hi,

    In -ms-grid layout you should use "fr" instead of %.

    Answer to your both questions ., Lets say you have this html :

    <body id="bd">
        <div id="main">
            <div id="Div1">   
            </div>
            <div id="Div2">
                <div id="testtext">
                    <h1 id="text">Sample Text</h1>
                </div>
            </div>
            <div id="Div3">
        </div>
        </div>
    </body>

    Then the CSS will be :

    #bd{
    	height:100%;
        width:100%;
       
    }
    
    #main { 
        height:100%;
        width:100%;
         -ms-grid-rows: 0.2fr 0.5fr 0.3fr;
        -ms-grid-columns: 1fr;
        display:-ms-grid;
    }
    
    
    #Div1{
    	-ms-grid-column: 1;
    	-ms-grid-row: 1;
        border:1px solid red;/*For test only*/     
    }
    #Div2{
    	-ms-grid-column: 1;
    	-ms-grid-row: 2;
        border:1px solid blue;/*For test only*/
    	}
    
        #Div3{
    	-ms-grid-column: 1;
    	-ms-grid-row: 3;
        border:1px solid green;/*For test only*/
    	
    }
    
    #testtext { 
        width:100%;
        height:100%;
        display:-ms-flexbox;
        -ms-flex-align:center;
    }
    
    #text {
        margin-left:auto;
        margin-right:auto;
    }

    The text is centered aligned in second div in the above sample.

    Hope this helps.

    - Girija

    Monday, April 22, 2013 11:00 PM