Picture not aligning in my 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

here it is again, please let me know if you still can't pull it up — insivika, Dec 21 '17 at 06:49
What exactly do you mean by "doesn't align with it"? Do you want the image width and height stretched to fill the container or do you want it to be centred within? — Pyromonk, Dec 21 '17 at 06:55
exactly! The width of the picture should be the width of the div — insivika, Dec 21 '17 at 06:56
@insivika, you can use `min-width: 100%;` on the image. Alternatively, you can use the `background-image` property of the div. [This question](https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat) might help you as well. — Pyromonk, Dec 21 '17 at 06:57
.propertyImage.mapViewPic { height: 260px; min-width: 100% !important; border-radius: 5px 5px 0 0; text-align : center; } — insivika, Dec 21 '17 at 07:05

score 1 · Answer 1 · answered Dec 21 '17 at 07:00

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>

score 1 · Accepted Answer · answered Dec 21 '17 at 07:09

1

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;
}

answered Dec 21 '17 at 07:09

pixlboy

1,452
13
30

are you positive I applied what you're showing me but it didn't do the trick. I really appreciate your help – insivika Dec 21 '17 at 07:17
I see you remove the .mapViewPic class from the div but how are you then still trying to to style it...? – insivika Dec 21 '17 at 07:22
Ha! it should be .propertyImage .mapViewPic { width: 600px; border-radius: 5px 5px 0 0; } – insivika Dec 21 '17 at 07:26
I removed the extra div and at the same time copied its class to the img. Then the target element in CSS should be .propertyOverview .mapViewPic – pixlboy Dec 21 '17 at 08:31

score 0 · Answer 3 · answered Dec 21 '17 at 06:57

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

Ok cool this does align the pic in the center however the width is for some reason not applied.. — insivika, Dec 21 '17 at 07:04

Aslan Mammadrzayev · Answer 4 · 2017-12-21T07:44:02.287

0

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%;
}

edited Dec 21 '17 at 07:44

answered Dec 21 '17 at 07:00

Aslan Mammadrzayev

275
5
16

thank you but it needs to be the whole width of the div – insivika Dec 21 '17 at 07:16

score 0 · Answer 5 · answered Dec 21 '17 at 07:13

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>

Picture not aligning in my DIV

5 Answers5