Cannot center a fluid image in a fluid Div

Question

Cannot center a fluid image in a fluid Div

79 views Asked by HCAWN At 13 June 2015 at 22:31

I'm having an issue with horizontally centering a fluid image in a fluid div. From looking high and low, the solutions others have found are not working for me, either I'm trying to do something too hard (I doubt it) or I'm working with different medium.

HTML:

<body>
  <div id="BackgroudDiv">
    <img src="images/NumberTwo.png" alt="" id="FSBG"/>
  </div>
</body>

CSS:

body {
    margin: 0px
}
#FSBG {
    width: auto;
    height: 100%;
    min-width: 1040px;
    position: absolute;
    min-height: 585px;
}
#BackgroudDiv {
    width: 100%;
    height: 1080px;
    text-align: center;
    display: block;
    background-color: #BF2527;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

"Margin: auto" does nothing as the width of everything is variable. In the code as it is, the left edge of the image "NumberTwo" is centered on the page. I want the center of the image to be centered. It behaves just as it should scaling-wise, but not in the middle of the page!

Any help would be much appreciated, it's been driving me up the wall. Let me know if more information is needed.

H

Original Q&A

There are 3 answers

Matt Hammond On 13 June 2015 at 22:38

As you are using position absolute, you need to set the top, right and left to 0px; and then you can add margin-left and margin-right auto.

Example - https://jsfiddle.net/zvbn2fak/

top:0px;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;

Please note that this is not best practice using position absolute on an image when its not need. Please read the comment by lmgonzalves, below with a better fix.

Achrome On 13 June 2015 at 22:41

You can use flexbox, but be wary that flexbox is not supported on older browsers.

#backgroundDiv {
  display: flex;
  justify-content: center;
}

And that's it. justify-content aligns the items inside in the flexbox along the direction of the flex. I'm not sure if it works on position: absolute items, but you can check it out.

Note: I've left vendor prefixes for the sake of brevity, but you'll likely have to add those to get the desired effect across browsers.

**lmgonzalves** · Accepted Answer · 2015-06-13 22:39:15

lmgonzalves On 13 June 2015 at 22:39 BEST ANSWER

You only need to remove the position: absolute; in the img:

#FSBG {
    width: auto;
    height: 100%;
    min-width: 1040px;
    min-height: 585px;
}

DEMO: https://jsfiddle.net/3w5rqg3d/1/

TechQA.

Cannot center a fluid image in a fluid Div

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in LAYOUT

Related Questions in FLUID

Popular Questions

Popular Tags

Trending Questions