I'm not able to center an image that has the position: absolute; property I tried to use a text-align: center
Note: the result has to work in browsers: Google chrome, Mozilla, Safari and Opera
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style-type: none;
}
.text-center {
text-align: center !important;
}
.corpo-1 h1 {
color: #000;
text-align: center;
font-family: Gabriola;
font-size: 2.8em;
font-weight: bold;
margin-top: 40%;
}
.corpo-1 p {
color: #000;
text-align: center;
font-family: Gabriola;
font-size: 1.2em;
margin-top: -2%;
}
.linha-titulo {
width: 30%;
height: 1.9px;
border: none;
background: #000;
}
.tamanho {
-webkit-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.info h1 {
margin-top: -3%;
}
.info p {
line-height: 10px;
}
.info {
text-align: center;
margin-top: 5%;
}
.info li {
display: inline;
float: left;
width: 33%;
height: 380px;
}
#btn-info {
border: 3px solid #000;
border-radius: 5px;
width: 220px;
height: 50px;
text-align: center;
font-family: Gabriola;
font-size: 1.5em;
color: #000;
background: transparent;
cursor: pointer;
clear: both;
display: block;
margin: 5% auto 5%;
}
#btn-info:hover {
background: #000;
color: #fff;
}
.bg-transparente {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: (0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
position: absolute;
margin-top: -10%;
opacity:0.15;
}
<section class="corpo-1">
<img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/yoshi-super-mario-02.png"class="bg-transparente">
<h1>Lorem ipsum dolor adipiscing<br />
amet dolor consequat</h1>
<p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
<br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>
<hr class="linha-titulo">
<ul class="info">
<li>
<img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="" class="tamanho" />
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
<p>Vestibulum at purus sed erat suscipit.</p>
<p>Cras facilisis viverra wisi. Class sociosqu...</p>
</li>
<li>
<img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="" class="tamanho" />
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
<p>Vestibulum at purus sed erat suscipit.</p>
<p>Cras facilisis viverra wisi. Class sociosqu...</p>
</li>
<li>
<img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="" class="tamanho" />
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
<p>Vestibulum at purus sed erat suscipit.</p>
<p>Cras facilisis viverra wisi. Class sociosqu...</p>
</li>
</ul>
<br>
<br>
<br>
<p class="text-center">
<button id="btn-info">leia mais ...</button>
</p>
</section>