samedi 27 juin 2015

Html5 images of the same size not aligned in two divs, same classes

I am trying to align two images in two divs. These are the two images, they are the same size, resolution, and the aligning is perfect when doing it in photoshop: http://ift.tt/1IBZxY6 But when I reference them in my index.html like so:

<!-- Intro Header -->
<div class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
                </div>
            </div>
        </div>
    </div>
</div>

With the exact same css classes:

.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/back2.png) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}


.acerca {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
     background: url(../img/back4.png) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.acerca .acerca-body {
    display: table-cell;
    vertical-align: middle;
}

.acerca .acerca-body .brand-heading {
    font-size: 40px;
}

.acerca .acerca-body .acerca-text {
    font-size: 18px;
}

And the images do not align as you can see in this picture: http://ift.tt/1IBZyek

I can't post images because of lacking reputation points, this is only my second question.

Do anyone know how to align them? Thanks.




Aucun commentaire:

Enregistrer un commentaire