How to center an image that is absolute

Asked

Viewed 269 times

1

I’m not able to center an image that has the property position :; tried to use a text-align:center and yet the year was because.

Note: the result has to work in the browsers :Google Chrome, Mozila, 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>

html5 css3
  • 3

    Put the CSS you have one more jsFiddle or other pf example.

  • Image size is fixed?

  • she is with position Absolute and a Transform Scale (0.8)

  • I just need you to stay in the center because when I give a text align center it doesn’t work because of Absolute

  • 2

    Brother, post the code there

  • OK friend I’ll put right now

  • friend edited the post a glance there for you to see the image and of course are not this taken from the net to facilitate viewing

  • 1

    Tried to use flexbox?

  • I don’t know this not friend and a tag ??

  • Css: . img-center { display: flex; Justify-content: center; } html <div class="center-img"></div>

  • You use it from the background?

Show 6 more comments

1 answer

1


The PARENT element should be Position Relative. In the image that looks like Position Absolute, you have to define the following CSS properties;

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

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.