1

Não estou conseguindo centralizar uma imagem que tenha a propriedade position :absolute; tentei utilizar um text-align:center e mesmo assim ano foi porque.

Obs:o resultado tem que funcionar nos navegadores :Google chrome, Mozila, Safari e o 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>

11
  • 3
    Coloca o CSS que tens mais um jsFiddle ou outro exemplo pf.
    – Sergio
    Commented 21/05/2015 às 13:07
  • O Tamanho da imagem está fixa? Commented 21/05/2015 às 13:08
  • ela esta com position absolute e um transform scale (0.8) Commented 21/05/2015 às 13:09
  • 2
    Irmão, poste o code ai Commented 21/05/2015 às 13:13
  • 1
    Tentou usar flexbox?
    – Thiago Jem
    Commented 21/05/2015 às 13:22

1 Resposta 1

1

O elemento PAI deve ser Position Relative. Na imagem que estiver como Position Absolute, você tem que definir as seguintes propriedades CSS;

left:0;
right:0;
margin: auto;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .