CODEWITHSUNDEEP
csspositioncss-positionalignment
artmem
artmem

Reputation: 367

Center an image horizontally and position it on the bottom vertically within a div when width is unknown

I have a figure with a percentage-based with. Within that box, I have an image with a transparent background. I need to center it horizontally, and pin it to the bottom of the container, while allowing the top to break out of the container (see image).

I can use absolute positioning to pin it to the bottom and break out of the top, but I can't get it centered. Is there a way to do it when I won't know the width of the image and the width of the container is flexible? Is display:table a possibility?

example My Code:

<figure class="feature">
<a href="#">
    <img src="image" /> 
    <p class="title-bar">Caption</p>
</a>
</figure>

.figure { position: relative; width: 50%; }
.figure img { position: absolute; bottom: 0; }

Upvotes: 3

Views: 4522

Answers (3)

user2274990
user2274990

Reputation:

Please, check this fiddle, there is 2 variants to center an image

http://jsfiddle.net/GSKFD/

Markup is the same

<figure>
<a href="">
    <img src="http://placekitten.com/200/300" alt="" />
</a>
</figure>

General style for both methods

img{
        vertical-align: bottom;
    }

First variant

figure{
position: relative;
width: 50%;
height: 300px;
background: #cad;
}
figure a{
    position: absolute;
    bottom: 0;
    left: 50%;
}
figure img{
    position: relative;
    left: -50%;
}

And the second one

figure{
    position: relative;
    width: 50%;    
    height: 300px;
    background: #cad;
}
figure a{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
}

Upvotes: 3

Deborah
Deborah

Reputation: 4575

You can do this with pure CSS, but you need two additional divs to hold and position the elements.

Here's the CSS: 

.featureHolder {
  position: relative;
  /* height can be anything */
  height: 200px;
}
.feature { 
  margin: 0;
  overflow: visible;
  /* width can be anything */ 
  width: 60%;  
  height: 100px;
  background: #cccccc; 
  position: absolute;
    bottom: 0;
}
.imageHolder { 
  text-align: center;
  width: 100%;
  position: absolute;
    bottom: 0;
}
img {
  margin-bottom: -5px;
}

Here's the HTML:

<div class="featureHolder">
  <figure class="feature">
    <div class="imageHolder">
        <a href="#">
            <img src="img" /> 
        </a>
    </div>
    <a href="#" class="title-bar">Caption</a>
  </figure>
</div>

Caption also can be positioned within the same a tag as the image, but in this example it's separated out so I didn't have to mess with it.

Here's a demo in JSFiddle - give .feature any width and img should still center. (BTW your CSS isn't right - it should be either 'figure' or '.feature', but can't be '.figure' as figure is an element with class name 'feature'.)

Upvotes: 3

chadpeppers
chadpeppers

Reputation: 2057

Basically you need to do a left: 50% then margin-left: -whatever the width of the image is. This will position it center in your relative div. My example assumes you do not know the width of the image.

http://jsfiddle.net/rVRT4/2/ http://jsfiddle.net/rVRT4/2/embedded/result/

$(document).ready(function(){
   var width = $(".figure img").width(); 
   $(".figure img").css("margin-left", -(width/2));     
});

.figure { position: relative; width: 50%; height: 500px;}
.figure img { position: absolute; bottom: 0; left:50%;}

<div class="figure">
<a href="#">
    <img src="https://i.sstatic.net/4TtEY.jpg" /> 
    <p class="title-bar">Caption</p>
</a>
</div>

Upvotes: 0

Related Questions