How to keep buttons, text and images relative to a screens/browsers size?

问题

I'm making a small website and I'm very new to CSS but whenever I change the size of the webpage I'm working on nothing stays relative to the size of the screen it's being displayed on. For example, I have text on the right, if I increase my browser size by maximising the text on the right stays in place and is now in the centre of the browser.

One of my images is moving with the webpage size being increased and decreased by dragging the corner of the browser. I use the same CSS code for that image on my hyperlinks list, text box or text in general and it doesn't work at all.

I've researched high and low, I've found some stuff on it but nothing seems to work. I'm getting so frustrated, my site is also local so I cannot even share the link. If anyone doesn't understand what I mean I'll try re-explain it's just quite hard to explain the issue.

Code that works for the image:

img {
    padding-top:50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Also, I want to move the hyperlinks to the top left, not have them auto assigned if that makes a difference and I cannot touch the HTML code either, just the CSS. (I'm doing a CSS test to see if I'm able to replicate an image of a webpage already done. I'm not doing this as part of coursework or a test at college/uni, I'm a student but I'm on work placement as a software engineer, this is part time homework for me to self-learn).

回答1:

you can use the percent notation

for example :

img {
  padding-top:50px;
  display: block;
  margin-left: 10%;
}

来源：https://stackoverflow.com/questions/8733795/how-to-keep-buttons-text-and-images-relative-to-a-screens-browsers-size

标签

html

css

size

responsive