CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Huy Le
Huy Le

Reputation: 389

Center image inside a div like setting background position

Are there any ways that we can set a tag inside a div perfectly center no matter what is the width and height of that div? In other way, I want to set an image position inside a div tag like a center background. For example:

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
}

I want to set an image inside a div like a background above with auto width and 100% height so that all the important content in an image will be in the center of the div.

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

Thank you very much!

Upvotes: 0

Views: 2287

Answers (8)

Asons
Asons

Reputation: 87191

You could use transform: translate

.image-wrap {
  position: relative;
  height: 400px;
  text-align: center;
  border: 1px dashed gray;
}
.image-wrap img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
<div class="image-wrap">
  <img src="http://placehold.it/200" alt="some image here"/>
</div>

Now, if you want it to behave as background-size: auto 100% does, do like this

.image-wrap {
  position: relative;
  height: 200px;
  border: 1px dashed gray;
  overflow: hidden;
}
.image-wrap img {
  position: relative;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

And here is a version behaving as background-size: cover does

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}
.image-wrap img {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

And this version behaving as background-size: contain does

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}
.image-wrap img {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

Upvotes: 2

FernAbby
FernAbby

Reputation: 1

just do it like this.set the container's property "text-align:center",make it is the inline-block element and 100% height，then can get what you want.

.image-wrap{
    width: 50vm;
    height: 720px;
    text-align: center;
}
.image-wrap img{
    display: inline-block;
    height: 100vm;
}

Upvotes: 0

Tajveer Singh Nijjar
Tajveer Singh Nijjar

Reputation: 535

You can use jquery to calculate the width of the div and image.

$(img).css({
    position: "absolute",
    left: ($(img).parent().width() - $(img).width()) / 2
});

This would mean: ((width of div)-(width of image))/2

This would center image perfectly.

Upvotes: 0

Tyler Hackbart
Tyler Hackbart

Reputation: 1948

This is the most over thought out problem that most developers run into. If the object is inside another object you are able to just use margin: 0 auto; inside the CSS. This will make the left and right ways to line up correct. This also then works for all media queries from small screen to large screens.

Upvotes: 0

Sivadass N
Sivadass N

Reputation: 927

You can center it easily using flex property. Demo here

.image-wrap {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: dotted 1px #CCC;
}
<div class="image-wrap">
  <img src="http://lorempixel.com/400/200" alt="some image here"/>
</div>

Upvotes: 3

Ben Hull
Ben Hull

Reputation: 7673

This is where FlexBox properties become very useful. You can set align-items: center; on a container to (by default) vertically center any child elements. Here's an example: https://jsfiddle.net/ks62qtns/

The advantage of this is that you don't need to know the dimensions of any of the elements involved in the layout - which is very useful for responsive designs and/or dynamic content.

Flex properties are reasonably well supported in modern browsers. You might need fallbacks to support older versions of IE (if you need to)

HTML:

<div class="container">
  <div class="content">
    <h1>
    Content. Any Content.
    </h1>
    <p>
    I might have anything in me!
    </p>
  </div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #EEE;

  /* This is just to make a big container. You can set the dimensions however you like.*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  background: #89D485;
  padding: 2rem;
  text-align: center;
}

Upvotes: 0

Janak Shrestha
Janak Shrestha

Reputation: 26

.parent-div {
  width: 50vw;
  height: 720px;
  position: relative;
  z-index: 1;
}

.image-wrap {
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
you can use like this
<div class="parent-div">
  <div class="image-wrap" style="background-image: url('http://weknowyourdreams.com/images/nature/nature-02.jpg')"></div>
</div>

Upvotes: 0

comesuccingfuccslot
comesuccingfuccslot

Reputation: 717

You could do it like so:

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
  position: relative;
}
img
{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px; /* (EXAMPLE) - value should be half of the image width */
  margin-top: -100px; /* (EXAMPLE) - value should be half of the image height */
}
<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

Upvotes: 1

Related Questions