0

I'm using Bootstrap and WordPress.

I've been researching how to horizontally and vertically align an image inside a div (classic problem, apparently). I used the answer to this question to vertically align my image: How to vertically align an image inside div

Now I need to horizontally align it. I know to do that, you normally add margin: 0 auto;

The problem is that the method that I followed uses margin:auto; and it undos the vertical align if I change it to margin:0 auto;

I started to make a JSFiddle of the problem, but I couldn't replicate it. So I think it's something in Bootstrap that is overriding it, but I'm not sure what.

Here is the basic code I'm using from the vertical align solution on the other stackoverflow question:

HTML

<div class="crop-featured-2">
    <img src="image.png">
</div>

CSS

.container { 
     position: relative;
     width: 100%;
     overflow: hidden; 
}

.crop-featured-2 {  
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid red;
    padding: 5px;
    display:block;
}  
.crop-featured-2 img {  
    min-height: 100px;  
    width:100%;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto; 
    border:0px; 
    padding:0;
}

You can see the problem at http://ucaftercruz.com/upcoming/?page_id=30. It's the slider at the top and the problem is in the .carousel-inner div. Resize the browser to around 800px wide to be able to really see the issue.

Thanks so much in advance!

Community
  • 1
  • 1
Tara
  • 251
  • 1
  • 5
  • 17
  • Are you saying it's the `carousel-indicators` div that you are having problem with? – DavidG Oct 23 '14 at 11:41
  • No, it's the divs within .carousel-inner I'll update my question to clarify – Tara Oct 23 '14 at 11:43
  • I don't see a problem except that your images are jumping and the pager is not showing in different widths. Can you specify what exactly is your issue? – Bojan Petkovski Oct 23 '14 at 11:46
  • At browser width 800px, you can see that the images are aligned vertically in the middle of the div, but are anchored to the left. I would like them to be aligned vertically and horizontally in the middle. – Tara Oct 23 '14 at 11:52
  • I removed `width: 575px` on `.crop-featured-2` and it **stretches at all viewport widths**. – misterManSam Oct 23 '14 at 12:04
  • 1
    Hey, thanks misterManSam!! That actually eliminated my need to horizontally align the image in the div. – Tara Oct 23 '14 at 12:07
  • @Tara - It also fixes the slide indicators at all widths, nice touch – misterManSam Oct 23 '14 at 12:10

2 Answers2

2

I had a look at your web page. I think the issue solves it self if you just remove the width rule from this selector:

.crop-featured-2 { 
  height: 320px;
  width: 575px;
  position: relative;
}

instead use

.crop-featured-2 { 
  height: 320px;
  position: relative;
}
Albin
  • 2,912
  • 1
  • 21
  • 31
-1

Try this 

.crop-featured-2 {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Nitish Kumar
  • 317
  • 5
  • 17