lundi 20 avril 2015

CSS text-positioning with "viewport-width" property

When I create a div with h1 inside I set margin-left to h1 55vw(viewport-width). And it's ok with my 1378px-width monitor but when I decided to resize my browser h1 text start to outdone/outstrip the image. How can I set it right in the position I need to in any size of the screen(except of very high/low resolution).

HTML code:

<div class="logo-container">
        <h1 class="text">
            Netherlands
        </h1>
    </div>

Its CSS:

<style>
    .logo-container {
        background: url(http://ift.tt/K933SU) no-repeat center;
        padding: 28px 0 14px;
    }
    .text {
        margin-top: 62px;
        margin-left: 55vw;
        font: 16px Arial;
        font-weight: 700;
    }
</style>

Aucun commentaire:

Enregistrer un commentaire