Live demo: http://jsfiddle.net/9Y7Cm/1/
I want the text to be placed at the 50% of the image height - so just in the middle of the box.
I was searching a lot on SO and google - there are a lot of questions like this, but each other is about another problem... I was tried the solutions given by people but none of them worked so thats why I'm asking you here for any solution!
Just set vertical-align: middle on the img.
http://jsfiddle.net/9Y7Cm/2/
replace the following with these:
#column-content {
display: table-cell;
border: 1px solid red;
padding: 10px;
}
img{
vertical-align:middle;
}
it's the image you want to center.
Related
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
So classical css problem, vertical aligning, but this time a bit more complicated, please take a look at this fiddle: http://jsfiddle.net/uH4Rn/2/
It is pretty obvious that i want image to be aligned exactly at the middle and as you can see it doesn't work i think problem is with these two lines:
top:-25%;
margin-top:-100px;
By the way i don't care about IE that much below 9 version and i would like to avoid javascript or jquery.
Since the previous answer didnt seem to give you the right result, here is another that definatly works. Unless i totally dont understand your question.
This solution will center any image in the given container:
.container{
width: 300px;
border: 1px solid black;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Fiddle: http://jsfiddle.net/uH4Rn/2/
I've run into an issue where the thumbnail spacing in my image gallery is all over the place and I'm burnt out, lol.
Here are a few example pages of what it's supposed to look like across all pages that contain thumbnails: Good | Good | Good
However, on most of the album pages, they get crunched together, like this page for example: Bad
Then there's this page, where it seems to have completely gone kablooey: Really Bad
I'm sure I'm missing a margin or padding somewhere, but it's eluding me at the moment. Anyone able to sort this out?
thanks!
You should re-write the CSS to have all lis float either left or right with a margin to taste.
This will ensure that all elements will stay within the specified distance of each other and removes the need for positioning and tons of unique IDs when one class will solve the issue.
Don't forget to add a clearing element before you close the div ;)
CSS:
#wrap
{
width: 450px;
margin: 0 auto;
border: 1px dashed #000;
}
.imageHolder
{
float: left;
width: 100px;
margin: 5px;
border: 1px dashed #00f;
}
.clear
{
display: block;
clear: both;
}
http://jsfiddle.net/Kyle_Sevenoaks/a6JGm/
Sorry for basic question. I have the following layout:
#existing-files .image-row{
width: 700px;
border: 1px solid orange;
padding-left: 10px;
}
.img-row-description{
border: 1px solid black;
display: inline;
width: 400px;
}
And it looks like this:
I'd like for the .img-row-description to be aligned to the top of the containing image-row. How would I do that?
I don't know what timpone's markup looks like, but I provided a couple jsFiddles for anyone who would like to explore how to do this.
As long as the structure in the markup is simple and valid, this effect can be accomplished by floating the img left rather than using vertical-align: top
Depending upon what you want to do:
Text wrapping around the image
No text wrapping around the image
Try using vertical-align:top
I'm having problems getting my icon to line up with the text, tried every combination i can think of, still aligned at top
http://jsfiddle.net/gkC32/1/
Any help would be great?
Have you tried setting the vertical-align property on the img element?
.bluebutton img {
vertical-align: middle;
}
Alternatively, since you're using the image purely as decoration, you might want to use background-image to set the icon instead:
.bluebutton {
background: #336699 url('http://cdn1.iconfinder.com/data/icons/fatcow/16x16_0460/group_add.png') no-repeat 10px center;
padding: 3px 10px 4px 28px;
}
See: http://jsfiddle.net/gkC32/8/
It's the image that's throwing it out I think. Adding something like:
.bluebutton img {
vertical-align:middle;
}
Should do the trick. If you arranged it differently as well, you could improve the alignment slightly further. e.g. http://jsfiddle.net/gkC32/32/