CODEWITHSUNDEEP
htmlcsscss-position
Faytraneozter
Faytraneozter

Reputation: 875

css image positioning center

i have problem with positioning image

<div class="foto img-thumbnail">
  <img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png">
</div>

the css file

.foto {
background-image: url('member/37/foto_profile/large.jpeg');
height: 300px;
background-repeat: no-repeat;
background-size:cover;
background-position: 
center center;
width: 100%;
}
.tengah {
position: absolute;
}

preview

GREEN = class tengah

RED = class foto

i want the image (RED) positioning center of div

when i change css like 

.tengah {
left: 50%;
top: 50%;
position: absolute;
}

it returning the center of image preview1

anybody can help me?

thanks before :)

Upvotes: 2

Views: 70028

Answers (2)

Martin Sansone - MiOEE
Martin Sansone - MiOEE

Reputation: 4399

A cleaner method that will adapt to different size screens would be to avoid the "position:absolute" altogether by setting auto margins left and right for the .tengah class:

.tengah {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   top: 50%;
}

This style class will auto center the image/div. The "top" can be adjusted a little depending on the image length if "vertical-align" is not used.

Upvotes: 1

davidpauljunior
davidpauljunior

Reputation: 8338

I think you're talking about centering the .tengah div in the .foto.

If so, then you need:

.foto {
  background-image: url('member/37/foto_profile/large.jpeg');
  height: 300px;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 
  center center;
  width: 100%;
  position: relative; /* ADDED */
}

.tengah {
  left: 50%;
  top: 50%;
  position: absolute;
  margin-top: -30px; /* ADDED */
  margin-left: -30px; /* ADDED */
}

The margins are half the width and height of the <div> you want centered.

Upvotes: 3

Related Questions