we have CSS:
#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img, #right img{float:center; vertical-align:middle;cursor:pointer}
Image is horizotal centered, but gets top aligned (i want middle)
html looks like
<div id="media">
<div id="left"><img/></div> <div id="right"><img/></div>
</div>
Any idea what i'm doing wrong?
By the way, all this problem it's because i'm displaying images with different resolutions :S
EDIT
This didn't help... :(
#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}
you can vertical align an image in a div that has no text in it by setting line-height on the on the div. example:
<div style="height: 100px; line-height: 100px;">
<img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</div>
You'll first off need to have some height declared on #left or #right to get it to align vertically. (As it is, it has no more known space to align vertically in than the space it's taking up--so it will always appear top-aligned.)
Secondly, make sure you understand vertical-align correctly. Here's a good resource: http://phrogz.net/css/vertical-align/index.html In short, vertical-align is probably not the best solution.
vertical-align on an image is how the text aligns to the image, the way the text wraps around the image. Not the way the image is displayed in the div.
Please see this on StackOverFlow
Related
Hello i used Bootstrap and my 2 div col-md-6 and col-md-6 are not in align in height.
Use this css for the first div.
div.col-md-6 {
display: inline-block;
vertical-align:middle;
}
The simplest way to align vertical align here is to add padding from top in the first div.Your second div have buttons and must be having padding also.
Use min-height for both using class to div. It will solve your query.
eg:
<div class="col-md-6 mycol">
</div>
<div class="col-md-6 mycol">
</div>
style.css
.mycol{
min-height:100px;
}
Without the code, it's hard to find the cause, but I guess your two div are without a css height property and then adapt to their content.
The div on the right contains items that seems to have a padding on top and bottom, resulting in an item with a greatest height than the one on the left.
Your two div are aligned on the top and as it's already been mentionned you need to add the same padding on the left and right cols (I don't like the vertical align answer, as it work in this case, but could cause issues as the cols height could change).
If you dont have a scenario where you text will wrap to the next line, you can use line-height which will be same for both the sections.
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
Struggling with the dreaded centring of different sized images in a DIV.
Got a solution from StackOverflow ( How to vertically align an image inside div ), using a <SPAN> as a dummy element (with vertical-align: middle) and it works well except for the images which are bigger than the DIV and these are correctly resized, but shown below the DIV.
If I remove the <SPAN>, then the centring works in the horizontal, but not in the vertical.
If there is a simple change, I can make as I like the simplicity of the solution.
The tests are at
http://mclportal.net/ModalTests.html
This will work for you:
<div id="divModal" style="display:table">
<div id="divImage" style="display:table-cell; vertical-align:middle">
<img id="img" src=".........">
</div>
</div>
You should put max width and max heights on your images. Then just use relative positioning of the images inside a div with a relative position. for instance...
<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>
Using an approach like this all images will be vertically aligned with each other and centered within their div container. Plus having max height and width set will allow the image to keep its aspect ratio.
#mcl not sure if you've managed to resolve your problem yet.
If not checkout out my blog post centering large images in smaller containers their is also a codepen demo on there.
I had the same issue and managed to get it working without any need of javascript or inline styles.
Hope it helps
I'm not sure if that title made sense but I'll try to explain to the best of my ability.
I want to add a div basically on top of an image, which is simple. I wrap the image around a div and then give things like top:, left:, from that.
Yet this div that the image is inside of exceeds the border of the actual image and goes all the way out to the parent div. How do I make it so that the border of the div just wraps around the actual image inside the div.
The black square is an image. But the div with the class of image, does not have a border that wraps around the image.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
Add display: inline-block to the .image div:
display: inline-block;
http://jsfiddle.net/wwRhB/4/
i have a DIV with a size x and some images in it with often a larger size. And in this case i need the image vertical centered in this DIV.
Dows anyone know, how i can realize that?
Thanks for reading that!
You can place the images inside divs and place those divs into the Your div and after words to center them
You can also make a class fo those divs and in the css part position:center;
You can use vertical alignment as here http://phrogz.net/css/vertical-align/index.html
If the div contains only images and no text/one liner, you can set line-height=height and use vertical-align to center the image.
<div style="height: 10px; line-height: 10px">
<img src="" style="vertical-align: middle"/>
</div>
PS: It is important to have a space character after the <img/> to force the image to align to the space in IE6.