locked
How to modify CSS scripts so that the panel always located at center of screen regardless of monitor size? RRS feed

  • Question

  • User546194788 posted

    I inserted a panel into one aspx page and set css as below.
    When monitor = 17", it is located at center of screen but when monitor=23" is located at left of screen.
    How to modify CSS scripts so that the panel always located at center of screen regardless of monitor size?

    <asp:Panel ID="pnlMaster" runat="server" CssClass="map" BackColor="#cfd6e5">

    .map {
    z-index: 1;
    left: 10%;
    background-color: lightblue;
    ;
    top: 8%;
    width: 1052px;
    height: 720px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    Wednesday, June 6, 2018 4:07 PM

All replies

  • User-330142929 posted

    Hi Aspfun,

     

    .map {
    z-index: 1;
    left: 10%;
    background-color: lightblue;
    ;
    top: 8%;
    width: 1052px;
    height: 720px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    According to your description, you want to make the absolute position block horizontally and vertically centered.

    So I suggest you could use the following ways to achieve what you want.

    Method 1:

           

    .map {
    z-index: 1;
    left:50%;
    margin-top:-360px;
    margin-left:-512px;
    background-color: lightblue;
    ;
    top: 50%;
    width: 1052px;
    height: 720px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    Set the left and top to 50%, margin-top and margin-rigth equal to half of the original value.

     

    Method 2:

    .map {
    z-index: 1;
    left:0;
    margin:auto;
    background-color: lightblue;
    ;
    top: 0;
    right:0;
    bottom:0;
    width: 1052px;
    height: 720px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    See:

    Please feel free to let me know if you have any question.

     

    Best Regards,

    Abraham

    Thursday, June 7, 2018 5:08 AM