图片在我的DIV中未对齐

Question

Not sure what's going on here. I re-seized the image to match the width of the div but somehow it still doesn't align with it. I uploaded the issue to codepen here. Tried to play around with the margins but its still doesn't change the behavior.

.propertyOverview.mapView {
  height: 430px;
  width: 600px;
  background-color: white;
  display: inline-block;
  border: solid 1px #E8E8E8;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  vertical-align: top;
  margin-left: 50px;
}

.propertyImage.mapViewPic {
  height: 260px;
  width: 600px;
  border-radius: 5px 5px 0 0;
}

.quickDetails {
  margin-top: 10px;
}

.propertyOverview p {
  margin: 0px 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .7px;
  font-family: 'Lato', sans-serif;
  line-height: 30px;
  color: #272635;
}

.propertyOverview .priceDetail {
  font-weight: 900;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  color: #272635;
}

.quickFacts {
  border-top: solid 1px #E8E8E8;
  padding-top: 5px;
  margin-top: 12px;
  color: #272635;
  font-size: 15px;
}

https://codepen.io/insivika/pen/PEzxPK

Answer 1

Issue is @

.propertyOverview.mapView {
    height: 430px;
    width: 600px;
}

Where width is 600px and the image width is 360px. Thats why the extra space.

 .propertyOverview.mapView { height: 430px; width: 360px; background-color: white; display: inline-block; border: solid 1px #E8E8E8; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; vertical-align: top; margin-left: 50px; } .propertyImage.mapViewPic { height: 260px; width: 100%; border-radius: 5px 5px 0 0; } .quickDetails { margin-top: 10px; } .propertyOverview p { margin: 0px 20px; font-size: 16px; font-weight: 400; letter-spacing: .7px; font-family: 'Lato', sans-serif; line-height: 30px; color: #272635; } .propertyOverview .priceDetail { font-weight: 900; font-family: 'Lato', sans-serif; font-size: 20px; color: #272635; } .quickFacts { border-top: solid 1px #E8E8E8; padding-top: 5px; margin-top: 12px; color: #272635; font-size: 15px; } .quickFact1, .quickFact2, .quickFact3, .like { display: inline-block; margin-left: 20px; font-family: 'Lato', sans-serif; } .like { margin-left: 110px; font-size: 23px; color: #cccccc; } .like:hover, .like:active { color: #FF3366; } 

  <div class="propertyOverview mapView"> <div class="propertyImage mapViewPic"> <img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" alt="sample_Property_Map1" alt=""> </div> <div class="quickDetails"> <p>5689 Main Ave</p> <p>Los Angeles, CA 90019</p> <p class="priceDetail">$556,000</p> </div> <div class="quickFacts"> <div class="quickFact1">2 br</div> <div class="quickFact2">2 bth</div> <div class="quickFact3">4,000 SF</div> <div class="like"><i class="fa fa-thumbs-up"></i></div> </div> </div> 

Answer 2

As I understand it, I guess you are trying to stretch the image to take up whole width of container. Here is the problem:

<div class="propertyImage mapViewPic">
    <img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" 
     alt="sample_Property_Map1" alt="">
</div>

.propertyImage.mapViewPic {
    height: 260px;
    width: 600px;
    border-radius: 5px 5px 0 0;
}

You have given a class to parent container of the image and targeting it in CSS.

Instead do this. Remove the extra container div

<div class="propertyOverview mapView">
    <img src="https://image.ibb.co/ivV9vR/sample_Property_Map1.png" 
     alt="sample_Property_Map1" alt="" class="propertyImage">
</div>

Update your CSS like this.

.propertyOverview .mapViewPic {
    width: 600px;
    border-radius: 5px 5px 0 0;
}

Answer 3

Aligning an image is same as aligning a text.... If you want your image to be centrally aligned with any div tag as you mentioned then their may be two possibilities that either align it relative to the div tag or you align both div and image together

If you want both div and image to be centrally aligned use

.propertyImage.mapViewPic {
text-align : center;
height: 260px;
width: 600px;
border-radius: 5px 5px 0 0;
}
div{
text-align: center;
}

This will align both of your div and image centrally taking into note that the image is not a child element of the div tag you mentioned, otherwise the image will be aligned with relative to the the div tag

Answer 4

You can check this link

.propertyImage.mapViewPic {  
   display: flex;
   align-items: center;
   justify-content: center; 
}

You can also set text-align: center; for img tag

**if you want full image of div **

.propertyImage.mapViewPic {
  overflow:hidden;
}

.propertyImage.mapViewPic img {
  width:100%;
}

Answer 5

you can use this code

<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .mm {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        width: 100%;
        height: 100vh;
        text-align: center;
    }
</style>
</head>
<body>
    <div class="mm"> <img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/1250833953592952166.png"/> </div>
</body>
</html>