If you check this:
http://jsfiddle.net/QbMmX/1/
Then you can see that the box(div element) is moving more at the left than the text. It doesnt get center like the text does. Why is this occuring and how can i fix this?
#recentStatus is centering as you're expecting as a result of its display: inline style.
So if you add display: inline-block to .userStatusComment, it'll center similarly to the other elements.
Take a look at this modified version of jsfiddle:
http://jsfiddle.net/QbMmX/4/
I have added a background-color to both the right and left elements to help you visualize the result and reason why the centering was not happening the way you wanted. This seems to work in chrome.
Hope this helps.
Bob
Related
I have a problem that i don't know how to fix.
This is my JSFiddle code.
I don't know how to get all of the items inside the top bar properly.
There also happens a strange thing: when i put some text inside the ID=toplogo, all the elements shift a bit. What causes this problem and how can i fix it?
please help
Edited your fiddle.
Basically I added:
overflow:hidden
..to your inline-blocks and set
line-height = height of block
..to align the text instead of using padding.
Check out the edits here
why you use padding-top for those login and signup ?
It is suggested to use <ul> instead of div's for menu
You want to achieve like this ?
check this fiddle
I have created some "buttons" out of three divs and I have set a hover to each div so that the text drops by 5px when the user hovers over the div.
I'm using display:inline-block as I don't want to use float:left
The only problem is that when I use display:inline-block on the divs, it lowers the other divs instead.
Here is how it should work (using float:left)
WORKING
And this is what happens when I used display:inline-block
NOT WORKING
Is there a fix for this or am I going to have to use a different solution?
Sorted the problem!
Although KingKing's answer was correct, using .wkd > * {vertical-align:middle;} didn't seem to work well with the rest of my code so I had to alter it slightly so it worked like so:
.won, .keep, .discard {
vertical-align:middle;
}
Still, KingKing's answer helped me figure this out so thank you :)
I use some DIV to create blocks with data inside.
I've set them to "inline-block" because I want the div to adjust his width to the content.
IE8 adjust his width to my content but I have a weird problem.
If you go to this fiddle : http://jsfiddle.net/GvMW8/ and click to the first or second link, you can see that divs are overlapping.
If you go to this fiddle : http://jsfiddle.net/hhpRP/1/ and do the same operation, it works!
The only difference between these two fiddles are the 'id' attribute of the main divs.
I don't understand why I have this problem, but can you tell me how to make it works with the inline-block display AND a div id?
Thanks for your help!
Looks like a little IE8 bug.
Check out http://jsfiddle.net/willemvb/fjqUc/
I added an extra class for the div around bigBlock and made it display: inline-block.
I also shortened your javascript.
This seemed enough to make IE8 listen :)
I am trying to implement the floater div (http://www.vanseodesign.com/css/vertical-centering/) method of vertically centring a h2. It doesn't work with the markup I have (see example below):
http://jsfiddle.net/brendan_rice/LCP5K/1/
Can anyone see where I am going wrong?
I don't really understand if you were trying to put that text box in the centered div or not , you didn't have it that way in your html, THis is an example of how to center with the method you were talking about , although there are much better ways , that is probably why this one was the last option of those examples in that link jsfiddle
I am trying to vertically center an anchor within a fieldset using CSS but it always appears to align to bottom. Is there any tricks to this?
You are not giving too much detail here. Besides the line-height you might also want to tweak top and bottom padding. It all depends on how much stuff you have inside the fieldset.
Have you tried specifying a line-height for the text? It should help to align in both Firefox and IE.
Try setting the style vertical-align:middle;
google
If that doesn't work posting your HTML would be helpful