javascript - CSS alignment to fit different screen resolutions - Stack Overflow

admin管理员组

文章数量:1410730

I am new to HTML and CSS. I am using ImpactJS engine and currently working on UI for some elements in my web game. I am trying to add an input box and call it using Jquery in my javascript files in the game. I got everything working till now but when I am trying to adjust my text input box and submit button to be fixed and not change with different screen resolutions but currently it doesn't seem to be working. The input box and submit button change their size and width according to different screen resolutions. Below is my CSS file

I also tried looking into other similar forums and tried changing the position to absolute but doesn't work too.

    #problemdisplay {
        position: absolute;
        margin-top: 10%;
        width: 100%;
    }
    #problemform {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding: 280px 2px 15px 400px;
    }
    #probleminput {
        display: none;
        width: 45%;
        margin-left: 5.5%;
        margin-right: 5.5%;
        padding: 35px 5px 15px 20px;
    }
    #problemsubmit {
        display: none;
        width:5%;
        padding: 15px 10px 8px 2px;
    }
    #prob_submit_msg {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #canvaswrapper {
        margin: 15px;
        position: relative;
    }
    #canvas {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

Any help would be much appreciated.

I am new to HTML and CSS. I am using ImpactJS engine and currently working on UI for some elements in my web game. I am trying to add an input box and call it using Jquery in my javascript files in the game. I got everything working till now but when I am trying to adjust my text input box and submit button to be fixed and not change with different screen resolutions but currently it doesn't seem to be working. The input box and submit button change their size and width according to different screen resolutions. Below is my CSS file

I also tried looking into other similar forums and tried changing the position to absolute but doesn't work too.

    #problemdisplay {
        position: absolute;
        margin-top: 10%;
        width: 100%;
    }
    #problemform {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding: 280px 2px 15px 400px;
    }
    #probleminput {
        display: none;
        width: 45%;
        margin-left: 5.5%;
        margin-right: 5.5%;
        padding: 35px 5px 15px 20px;
    }
    #problemsubmit {
        display: none;
        width:5%;
        padding: 15px 10px 8px 2px;
    }
    #prob_submit_msg {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #canvaswrapper {
        margin: 15px;
        position: relative;
    }
    #canvas {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

Any help would be much appreciated.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 14, 2014 at 19:03 HtlcsHtlcs 56544 gold badges1313 silver badges2626 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

lets make it simple if you have a div you want to make adjust to its center lets assume height of your div is 300px and width is 400px all you have to do is:

position:absolute;
margin-top:-150px;
margin-left:-200px;
top:50%;
left:50%;

This will do the job and it will adjust your div to center for every screen resolution.

Use pixel value to set width height of that input and submit button

<input type="button" class="submit" value="submit"/>

css:

.submit
{
    width: 100px;
    height: 50px;
}

You are using percentages in the width property of your submit/inputs. According to the documentation ""% Defines the width in percent of the containing block". Try using fixed values (10px; 1em for example) and see how it goes.

Your problem is that you are using % widths. That will make the input and submit button re-size, depending on the size of the container that is holding them.

To fix that, change your widths to be set in pixel value. That will make them a specified width, no matter what.

As an example: http://jsfiddle/6yHrK/

HTML:

<input class="percent">
<br>
<input class="pixel">

CSS:

input.percent {
    width: 50%;
}
input.pixel {
    width: 250px;
}

This will align the Element center to the page,

margin : 0 auto; 

本文标签： javascriptCSS alignment to fit different screen resolutionsStack Overflow