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
Related
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
I'm creating a web application where I need to do some design tweaks. Please check this one http://jsfiddle.net/rkumarnirmal/5w3FG/9/
When I hover, it shows the border in gray. What I need is I want to fit the border box to fit the width of the text. I tried to set the width:auto but still its not working, showing the border box to the page width size.
How can I do it?
Thanks!
Set text-preview to inline-block:
#text-preview {
display:inline-block;
zoom:1; /* if you need IE7 support */
}
Inline-block will cause the element to render as if inline rather than occupying all of the available horizontal space, but will lets you set inner dimensions and padding as a block element would.
Note that IE7 doesn't support inline-block unless you force the hasLayout property. The easiest way to do that is with zoom:1;.
width:auto on a div translates to width:100% because a div is a block level element.
If you want to have it size to the text you'll need to either use a more appropriate inline tag like a span or depending on the semantic meaning of the data, a definition list (dl).
You can also change the display property of your wrapper div to be inline or inline-block but that is not semantically correct.
I have a block-level element of unknown width. This element needs to be horizontally centered on the page, and its position needs to be relative so that its absolutely positioned child will show up in the right place. You can see it in action here.
As far as I know, the best way to center an element of unknown width is to set its display to table. Semantically, this seems incorrect, because my element has nothing in common with a real table. Even worse, Firefox doesn't apply position to tables, so the absolutely positioned child shows up in the wrong spot:
Are there any workarounds for this that:
don't add any extra elements to the html
don't calculate and set the element's width with JavaScript
I'd like a pure CSS fix, and I'm running out of ideas...
Adding display: inline-block; to the element (#box) should suffice. This will cause it to become an inline element and still keep its "boxy" properties. Its width will automatically take up the width of its children.
Then you can set its alignment by setting text-align: center; on its parent.
IE7 does not support this display value (only on naturally inline elements), but the situation is the same with table (no support at all). You can use a hack though to make inline-block work in IE7.
jsFiddle Demo
If worst comes to worst, you could try text-align: -moz-center; which is a Firefox-specific method of centering block elements like inline-elements.
I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?
My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.
If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?
It's used the vertical align inline elements indeed. Block level elements will ignore this property. So your understanding is right.
This blog gives some background information on vertical-align with some examples. It's mainly used to vertically position an image in a line of text. Or to replace the valign attribute on tablecells.
So it seems you are understanding it quite right. See w3schools for the details on the vertical-align property.
Just to be clear; do not try to use vertical-align to position a blocklevel element like a div. It will not work, as you already mentioned, it's for inline elements like images in a line of text. Using display: table-cell; and vertical-align on an element is a hack, please use other CSS techniques to vertically align stuff in an div whenever possible.
It's always worth reading the specs if you want to learn about a specific property:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
A common use case is vertical centering (in combination with display: table-cell):
http://jsfiddle.net/7eTb2/
div {
background: #ccc;
width: 200px;
height: 300px;
padding: 5px;
display: table-cell;
vertical-align: middle
}
It's somewhat difficult to vertically center without using this technique.
Another common use case is when it comes to elements that are inline or inline-block.
See here for examples of what happens with different vertical-align values:
http://www.brunildo.org/test/inline-block.html
Another good link to read: http://css-tricks.com/what-is-vertical-align/
However, it's real use is getting me upvotes, see:
https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22
:)
Others have been mostly correct about vertical-align. The reality is that it works, just not how you think. It's for inline elements, not block elements.
In this case, a fiddle is worth a thousand words. :)
http://jsfiddle.net/JJfuj/
vertical align, by the W3C and by how most(tm) interpret it, is only used/takes affect in elements that are table-cells (<td>), and on some browsers, elements with the display: table-cell declaration.
The rest of the time, it is largely disregarded by browsers.
Vertical align is for just what it sounds like. It aligns the element vertically within the parent object; however, not all browsers interpret it the same.
Here's a little more in-depth information on the parameter values available.
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/