在不同计算机上的相同位置

Question

I have some images on my page that looks fine on my mac but when I open the page on a different computer the positions of the elements is completely different. Also I have the same problem with text placement, on my computer the text is for example 3cm from the edge of the page but on a different screen it's not right. Here is a snippet of the code.

IMAGE PLACEMENT:

HTML

<img src="las.jpg" width=660px height="auto" class="center"/>

CSS file

.center{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -10%;
}

TEXT PLACEMENT:

HTML

<p><i><b>Park Narodowy</b> - "obejmuje obszar wyróżniający się szczególnymi `wartościami przyrodniczymi, naukowymi, społecznymi, kulturowymi i edukacyjnymi, o powierzchni nie mniejszej niż 1000 ha, na którym ochronie podlega cała przyroda oraz walory krajobrazowe." <br></i></p>

CSS file:

p{

position: absolute; left: 8cm;
right: 8cm;
text-align: justify;
}

Answer 1

Different computers means different screen size, but also different navigators.

In css, using the auto value means that you really on the browser default stylesheet to handle the parameter, in your case the left and right margins.

auto

The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

from https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Also, when using relative units such as percentage, the value will differ according to screen and window size, causing different behaviors. You can use absolute units such as pixels to avoid this issue.