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