I'm trying to align two div horizontally, I'm using display:inline-block; to align them, but If one is longer than other, the smalliest one is under "a normal line".
Like this :
Here is my code : http://pastebin.com/vqiNkth2
PS : I'm using bootstrap with some pages, and with the header/footer, but not the content in this one.
if you have given display inline block so make sure yo give vertical align top to both div's .. your problem will be solved.. and for some reason the link you provided not working.
Related
I'm relatively new to HTML and CSS and am trying to use CSS flexbox to align two divs horizontally instead of it positioning the second div underneath the first or just having the second one just hide behind the first one.
I've tried answers from
this question and many others that all suggested to use justify-content to horizontally align the content but it's just not working for me. Here is the code that I'm struggling with.
Any help is greatly appreciated!
Many thanks,
Michael
EDIT:
Sorry for the confusion, to clarify, what I want is the text aligned horizontally to the right of the other div coloured grey. I should also say that I have tried using float with no success.
just add this float:left; to sidebar class style . after this two div align horizontally ,if i understand what you need to achieve.
How can I vertically align a in the middle of a fixed height using datatables?
In order to help you, you must share a jsfiddle with your case.
If you read this page the example has the right vertical align
Check your column rowspan, HTML errors or css datatables file.
You can also inspect the example and compare it with your code.
Since a few years ago I see some blogs like Pinterest which display posts of different heights in columns with no horizontal alignment. I don't understand how they achieve that. Do they use Javascript? If so, do they use some jQuery plugin?
If you have two different divs, both vertical, then they shouldn't try to horizontally align themselves. For example of you made a single div that would enclose both columns, making it the proper width and height, and then nested two more divs inside of it with a width around 50%, then they would not align horizontally. Outside of that, there shouldn't be anything trying to horizontally align the elements of those divs. If this doesn't answer your question, please post the code.
I'm trying to achieve the following: I have a central div (wrapper) exactly in the center of my page, both vertically and horizontally. Inside that div I want to have another 2 divs, one of which will contain a logo and the other some text. The logo image also has to be aligned vertically and horizontally to the center of its div. Currently this is what I have:
Here's the jsfiddle with my HTML and CSS: http://jsfiddle.net/7cQhG/
How can I center the logo div (only centered horizontally, and have a 10px margin-top) and have the logo image centered inside that div, both horizontally and vertically, just as it is now)?
Is there any reason you have to have the logo as an img?
I've taken the starting point you gave, and put together a jsFiddle fork : http://jsfiddle.net/mori57/HDmkZ/
I've taken out the img tag, and used it as a background image. "center center" should theoretically center it within its container, and as it's a transparent png, your background color still shows up as you wanted.
Let me know if this works for you, or if you have any other questions.
As a sidebar, you really don't need (and you really shouldn't) to specify your tags in your CSS. The only place that's really appropriate is if you're assigning defaults to a specific tag... otherwise, rules of specificity are already going to take over when you're using those IDs you've got in there.
Note that I wasn't clear what you wanted to do with the text below the logo, so I didn't do any styling, there.
i'm trying to create a row with buttons, where the content inside the button is vertically aligned to the middle of the button. All buttons should should be the same height.
problem is when an image is used inside a button.
i made a small example:
http://jsfiddle.net/L2L2G/
why is the the third button not aligned with the other 2 ? I think that the buttonheight should be enough for the small content?
If I use vertical-align:middle; instead of absmiddle, it works fine in Chrome.
AFAIK the latter is not a valid value for vertical-align.
Demo