My image is staying at the top. Code using:
#header_div{
min-height:200px;
}
#header_div img{
display:block;
vertical-align:middle;
padding:5px 10px;
}
<div id="header_div">
<a href="#">
<img width="250" height="75" src="./images/header_logo.png" />
</a>
</div>
On a side note, should I close image tags with />?
#header_div
{
min-height:200px;
display: table-cell;
vertical-align:middle;
}
You will no longer need the vertical-align:middle; or display:block; on the img style and you probably can remove the top/bottom padding as well.
good write-up on centering an image in a box:
http://www.brunildo.org/test/img_center.html
vertical-align doesnt work like that. you can apply the image as a background-image to the parent div or to the anchor, and use background-position: center center.
if youd like an anchor's inline content to be centred vertically, one way to do it is to set the element's line-height in px to the total height required.
Related
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>
<div id="content"></div>
CSS
#show01{
margin-top:14px;
position: relative;
height:auto;
border:thin solid blue;
}
#show01 img {
position: absolute;
max-width:70%;
}
#content{
background:#999;
height:45px;
}
img must be position:absolute because they are subject of jquery slide show.
but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.
So, how can I keep img position:absolute and show01 to have height as the img inside.
I cannot define div show01 height in pixels, because of keeping responsive layout.
fiddle is here
This is semi-hack(ish).. but you could set a margin for #show01.
Try margin-bottom:24%;.. see the example and let me know if this is what you were aiming for.
Example
Basically you are going to have to set a margin equal to the size of the images to displace the unspecified height.. It seems to work responsively when you resize the browser too..
Ok so I have a an anchor element within a div with a fixed width, the anchor element needs to remain inline because the text that it holds is dynamic and it has a background because it is a button. I want the background of the button to only be the size of the length of text too. Is there a way to do so?
<div class="wrap">
<a class="button>Start ยป</a>
</div>
.wrap{
width:900px;
background:white;
}
a{
display:inline;
background:black;
}
I think
.wrap{
width:900px;
text-align: center;
}
will do the trick
See
http://jsfiddle.net/jEsRG/3/
I am trying to align an image in a div to center. I have tried the following but its not working. Please tell me how to fix this . thanks in advance.
<div class="erabox"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>
<div class="erabox" style="text-align:center"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>
just you need style="text-align:center" in your div tag.
Try with the following CSS code. It makes your <img> aligned center horizontally and aligned middle vertically.
.erabox{
width:200px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle;
}
Just use margin auto:
.erabox img {
display: block;
margin: auto;
}
DEMO: http://jsbin.com/apiwox/edit#html,live
Try below code in CSS. it will work for sure
align="absmiddle"
CSS
.erabox{
position:relative;
}
.erabox img{
position:absolute;
top:50%;
left:50%;
margin-top:-19px; /* Half of images height */
margin-left:-115px; /* Half of images width */
}
If .erabox div's width and height are fixed or at least it's height and width are always surely greater than image's you can use image as a background
HTML
<div class="erabox"></div>
CSS
.erabox{
background:url("indicator2.gif") no-repeat;
background-position:50% 50%;
}
Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?
The image is semantically relevant so, it cannot be a background;
The html:
<div class="logo-organization-home">
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>
And the css:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;
Failed try:
http://cssdesk.com/pQnRG
Thanks
To center horizontaly, use: 'text-align:center' for .logo-organization-home
If the containing element has a width, you can use the following:
.logo-organization-home img {
display:block;
margin:0 auto;
}
Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.
Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
table{
width:100%;
height:100%;
}
td{
vertical-align:center;
text-align:center;
}
And the HTML:
<div class="logo-organization-home">
<table><tr><td>
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</td></tr></table>
</div>