How can I center an image horizontally and aligned to the bottom of the container at the same time?
I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time.
Here is what I have:
.image_block {
width: 175px;
height: 175px;
position: relative;
margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}
<div class="image_block">
<a href="..."><img src="..." border="0"></a>
</div>
That code aligns the image to the bottom of the div. What do I need to add/change to make it also center the image horizontally inside the div? The image size is not known before hand but it will be 175x175 or less.
This question is related to
css
positioning
have you tried:
.image_block{
text-align: center;
vertical-align: bottom;
}
wouldn't
margin-left:auto;
margin-right:auto;
added to the .image_block a img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_block the container Div
text-align:center;
position:relative; could be a problem too.
have you tried:
.image_block{
text-align: center;
vertical-align: bottom;
}
This is tricky; the reason it's failing is that you can't position via margin or text-align while absolutely positioned.
If the image is alone in the div, then I recommend something like this:
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
You may need to stick the vertical-align call on the image instead; not really sure without testing it. Using vertical-align and line-height is going to treat you a lot better, though, than trying to mess around with absolute positioning.
wouldn't
margin-left:auto;
margin-right:auto;
added to the .image_block a img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_block the container Div
text-align:center;
position:relative; could be a problem too.
Remove the position: relative; line. I'm not sure why exactly but it fixes it for me.
have you tried:
.image_block{
text-align: center;
vertical-align: bottom;
}
#header2
{
display: table-cell;
vertical-align: bottom;
background-color:Red;
}
<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
<p>this is a test</p>
</div>
</div>
Remove the position: relative; line. I'm not sure why exactly but it fixes it for me.
This also works (taken a hint from this question)
.image_block {
height: 175px;
width:175px;
position:relative;
}
.image_block a img{
margin:auto; /* Required */
position:absolute; /* Required */
bottom:0; /* Aligns at the bottom */
left:0;right:0; /* Aligns horizontal center */
max-height:100%; /* images bigger than 175 px */
max-width:100%; /* will be shrinked to size */
}
wouldn't
margin-left:auto;
margin-right:auto;
added to the .image_block a img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_block the container Div
text-align:center;
position:relative; could be a problem too.
This is tricky; the reason it's failing is that you can't position via margin or text-align while absolutely positioned.
If the image is alone in the div, then I recommend something like this:
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
You may need to stick the vertical-align call on the image instead; not really sure without testing it. Using vertical-align and line-height is going to treat you a lot better, though, than trying to mess around with absolute positioning.
Remove the position: relative; line. I'm not sure why exactly but it fixes it for me.
This also works (taken a hint from this question)
.image_block {
height: 175px;
width:175px;
position:relative;
}
.image_block a img{
margin:auto; /* Required */
position:absolute; /* Required */
bottom:0; /* Aligns at the bottom */
left:0;right:0; /* Aligns horizontal center */
max-height:100%; /* images bigger than 175 px */
max-width:100%; /* will be shrinked to size */
}
This is tricky; the reason it's failing is that you can't position via margin or text-align while absolutely positioned.
If the image is alone in the div, then I recommend something like this:
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
You may need to stick the vertical-align call on the image instead; not really sure without testing it. Using vertical-align and line-height is going to treat you a lot better, though, than trying to mess around with absolute positioning.
Remove the position: relative; line. I'm not sure why exactly but it fixes it for me.
have you tried:
.image_block{
text-align: center;
vertical-align: bottom;
}
wouldn't
margin-left:auto;
margin-right:auto;
added to the .image_block a img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_block the container Div
text-align:center;
position:relative; could be a problem too.
This is tricky; the reason it's failing is that you can't position via margin or text-align while absolutely positioned.
If the image is alone in the div, then I recommend something like this:
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
You may need to stick the vertical-align call on the image instead; not really sure without testing it. Using vertical-align and line-height is going to treat you a lot better, though, than trying to mess around with absolute positioning.
#header2
{
display: table-cell;
vertical-align: bottom;
background-color:Red;
}
<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
<p>this is a test</p>
</div>
</div>
Source: Stackoverflow.com