1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • Vertical centre slightly off in grid

    From Andrew Poulos@21:1/5 to All on Thu Feb 4 16:06:16 2021
    I have this html

    <div id="outer">
    <div id="inner"></div>
    </div>

    and this CSS

    #outer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    row-gap: 8px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px 0 0 10px;
    }

    #inner {
    width: 10%;
    height: 98%;
    margin: 1% 0% 0% 22%;
    place-self: start;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    }

    With a top margin of 1% and a height of 98% I was expecting (hoping)
    #inner would be vertically centred on the three grid rows but it is
    offset down a few pixels.

    I did a screen capture to check all the dimensions and:

    - the height of #outer, not including padding, is 590 pixels.
    - the height of #outer, including padding, is 620 pixels.
    - the height of #inner is 578 pixels high which is 98% of 590 ie correct.
    - the top margin is 9 pixels high which is 1.5+% and not 1%. If worked
    out from the full height of #outer 1% would be 6 pixels.
    - the right margin percentage correctly matches the pixel dimension I
    measured.

    What could be causing the top margin to be slightly (but noticeably)
    larger than it "should" be?

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Thu Feb 4 14:09:16 2021
    This is a multi-part message in MIME format.
    On 04/02/2021 05:06, Andrew Poulos wrote:

    What could be causing the top margin to be slightly (but noticeably)
    larger than it "should" be?

    It could be that you are using margins all over the place and/or not
    using the Grid css as intended.

    I suggest start with the following css and then tweak it as desired

    |* { box-sizing: border-box; padding: 0; margin: 0; } #outer { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 2fr 1fr; gap:
    8px; height: 100px; border: 2px solid red; justify-items: center;
    align-self: center; } #inner { grid-column: 1 / -1; grid-row: 1 / -1;
    border: 2px solid blue; justify-items: center; align-self: center;
    padding: 10px; } |

    [ CSS-Tricks ] <https://css-tricks.com/tag/grid/>


    --

    With over 1.2 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Brawler"
    rel="stylesheet">
    <style>
    box-sizing:{}@keyframes test{0%{border-color:darkgreen}50%{border-color:red}70%{border-color:yellow}100%{border-color:grey}0%{border-color:darkgreen}0%{border-color:darkgreen}0%{border-color:darkgreen}}@keyframes newsgroups{0%{border-color:
    red}16.66666667%{border-color:orange}33.33333333%{border-color:yellow}50%{border-color:green}66.66666667%{border-color:blue}83.33333333%{border-color:indigo}100%{border-color:violet}}body{background-color:#d6cdab;font-family:'Brawler','Montserrat','
    Roboto','Open+Sans','sans-serif','serif';margin:0;padding:0 0 20px 0}div.newsgroups{border:solid transparent 10px;background-color:#eee;animation-name:newsgroups;animation-duration:15s;animation-iteration-count:infinite;animation-direction:alternate-
    reverse;padding:10px;font-size:18px;width:80%;margin:auto}ul{list-style-type:square}img{width:100%;display:inline-block;border:12px solid #00f}img,div{box-sizing:border-box}
    </style>
    </head>
    <body text="#008000" bgcolor="#faf0e6">
    <p><br>
    </p>
    <div class="newsgroups">
    <div class="moz-cite-prefix">On 04/02/2021 05:06, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:PfKdnXtmcoFUHYb9nZ2dnUU7-UvNnZ2d@westnet.com.au"><br>
    What could be causing the top margin to be slightly (but
    noticeably) larger than it "should" be? <br>
    </blockquote>
    <br>
    <p>It could be that you are using margins all over the place
    and/or not using the Grid css as intended.</p>
    <p>I suggest start with the following css and then tweak it as
    desired</p>
    <pre> <code>
    * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }

    #outer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    gap: 8px;
    height: 100px;
    border: 2px solid red;
    justify-items: center;
    align-self: center;
    }

    #inner {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border: 2px solid blue;
    justify-items: center;
    align-self: center;
    padding: 10px;
    }

    </code>
    </pre>
    <a href="https://css-tricks.com/tag/grid/"> <img
    moz-do-not-send="true" src="https://i.imgur.com/hpx5r3d.jpg"
    alt="[ CSS-Tricks ]" width="708"></a> </div>
    <br>
    <br>
    <div class="moz-signature">-- <br>
    <div style="background-color: blue; color: yellow; font-weight:
    bolder; display: grid; align-items: center; justify-items:
    center; min-height: 80px; font-size: 1.2em; border-radius: 50px;
    ">
    <p>With over 1.2 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version of
    windows.</p>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)