Do you know how can I make text vertically centred? I need something like valign attribute, but written in css. Any ideas?
There's is no universal answer to this. Unfortunataly, no, there is no true equivalent in CSS. Some options depending on the context of your particular layout:
for one line of text, giving the text a line-height equal to the height of the container will center it vertically
if not worrying about IE, you can use display: table-cell on the container and add vertical-align: middle
use JS to calculate the necessary positioning or padding/margin needed to center the element after calculating the heights of the container and child element.
Try the vertical-align property
Related
I tried centering the text of an option tag using text-align:center to no avail. Some research found me the solution of text-align-last:center and this worked but it doesn't make sense to me how? If both text-align-last and text-align are both are responsible for centering text, then shouldn't text-align on its own been able to do the job?
Heres a fiddle of what i'm talking about: https://jsfiddle.net/L3ehgc0j/1
The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.
And
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.
I have a couple of divs that the content needs to be vertically aligned.
On my parent element I have display: table and on the children elements I have display: table-cell; vertical-align: middle;.
From what I read this should have been sufficient. For safe measure in my CSS I added heights to my elements to make sure they are both the same height as the parent element and I also added the image dimensions in the CSS to keep them the size they should be in case of failure to load.
I made a JSFiddle of my code.
My HTML and CSS are both in the fiddle.
I figured it was easier to give a working example.
From https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Since you put it in a float, it is taken out of the normal flow
Setting display: table-cell makes the element act like a <td> element
When I set min-height and "vertical-align: middle;" the text is not aligned vertically.
First example: http://jsfiddle.net/pkaXR/
How should I change css align image and text vertically ?
min-height sets the minimum height of a block.
vertical-align sets the position of inline content on a line.
Perhaps like http://jsfiddle.net/rPsEJ/26/ - I'm not sure I understood the question right though. ;-) As far as I know, vertical-align only applies to table cells.
I'm trying to center text vertically in an inline-block element (and particularly in webkit browsers). Pretty much exactly what the <button> element does out of the box.
I've tried using box-align, as in this question Vertical align text in block element but I don't want to set an explicit width on the element: I want it to fit to its contents, i.e. I want display: inline-block type behavior.
In Firefox, -moz-box appears to behave the way I want, but in Safari and Chrome, -webkit-box makes the div want to fill its container horizontally.
[oops, can't post image as I'm a noob]
Fiddle here with examples of various settings.
Looking at webkit's inspector on an actual <button> element, it defaults to display: inline-block and yet it obeys -webkit-box-align as if it were set to display: -webkit-box. See the fiddle where I explicitly set display:inline-block and -webkit-box-align: end on a <button> to demonstrate.
It seems that by adding an extra <div> into the mix, I can get the behavior I want, but I'd really rather not do that. I'm also aware of the display: table-cell technique for vertical centering; this is not appropriate here as it has other side-effects.
So is webkit's behavior correct? How does the <button> element do what the <div> can't? Is there some under-the-hood webkit CSS property that I haven't spotted that could make the <div> behave like the <button>? Or even better, any cross-browser way of doing this?
use line-height property of css. make it equal to the height of the box containing text.
http://www.w3schools.com/cssref/pr_dim_line-height.asp
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/