Search code examples
ioscsswebkitblockcentering

html/css -- trying to center image and ignore body margins

Foo.html:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
    The appearance of the text is good.  This image should be centered, but it isn't:
    <img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img>
</body>

TestStyle.css:

body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

Result:

enter image description here

Solution

  • Try:

    .centerblock {
position:fixed;
top:10px;
left: 10px;
}

    Maybe that can help, Although i don't know what can happen if you turn the phone.

    I would make that main content area to fit to the edge of display and define all align properties for each element.

    It's never very smart to do:

    body {margin-left:30px;}
body {margin-right:30px;}

    There is also option:

    .main-container {
margin: 0 auto;
}

    That also centers all the content but i think, also would not solve your problem.