I would like to vertically center a display:inline-block element with vertical-align:middle. The problem is that it doesn't vertically align in the absolute center until the text reaches that point.
See: http://jsbin.com/afojew/1/edit
This works, but is a bit hacky: http://jsbin.com/afojew/2/edit
edit: ^ that doesn't quite work, but this does: http://jsbin.com/afojew/3/edit
This has been asked before - Ive just read it and it contains pretty much everything you would need to know with this problem : Vertically align text in a div
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.
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.
I have a div, I need ALL the elements inside to be centred, this includes; text and some images.
.class {
text-align: centre;
}
Works, however is there a better (best practice) Way to do this? I tried fiddling with margins etc... and it worked up until I resized to browser windows, any images that moved down (next row) were automatically aligned left?
What I am asking is there a css class similar to vertical-align but for aligning elements horizontally?
text-align: center (not centre) is your best bet. There are things you can do to prevent the items from breaking to a new line, such as setting a (max-)width on images inside this div based on media queries. But as far as aligning them in the center goes, just use text-align and if you want to break to a new line, a simple br will do the trick.
You said you played with margins. If you want to space elements out on the same row, keep using the margin property, but in addition to the text-align on the parent div.
You may use margin to horizontally align
margin: 0 auto;
http://jsfiddle.net/knzg410f/
alternate way :
to align horizontally you could use paragraph tag:
<p align="center">your text here</p>
http://jsfiddle.net/3Lz59zca/
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
What is my misunderstanding about the way that vertical-align:middle; works?
I have posted (http://jsfiddle.net/D6RwZ/) some code which I would expect to vertically align a red rectangle in a blue rectangle, but it doesn't look like that.
vertical-align:middle won't work on div (block element). You can refer here for details.
If you want to vertical align, I think the only option is using margin/padding with appropriate parameters.
Vertical-align only works on inline images and display: table-cell.
I've used this solution a few times and it works quite well but takes some work. If you're working with fixed size elements position absolute is by far the simplest. Dynamic sized elements and vertical centering can be very tricky, lots of browser quirks to deal with.
vertical-align can only be applied to elements with:
display:table-cell in order to vertically align the contents of the element.
display:inline or display:inline-block in order to vertically align the element within the text line that contains it
A cheap hack with the latter : http://jsfiddle.net/8bZQS/