I'm having trouble with a text line that has multiple font sizes in it. I want all the text to be aligned to the middle of the .line1 element. I used vertical-align:middle but it doesn't do the trick. Here's the JSfiddle: http://jsfiddle.net/tWxdT/
erase all vertical-align in css. and give product_mark_bg a vertical-align:baseline
Looks fine to me in Google Chrome as well, but may I recommend using display: table-cell; in your CSS as well? If not even that then scrap using Vertical-Align and try having equal amounts of Padding via the Top and Bottom for your HTML Tags.
You can set the line-height to get better alignment of differently sized text. Not sure it's what you are looking for, but adding a line-height of 2.2em in the example centered the text a bit differently.
Related
I have set up vertical alignment using the same value line-height, vertical margins and paddings, but when there is a smaller element, like the <small> tag, inside the flow, it ruins for some pixels the vertical rhythm, I can solve adding vertical-align:top/bottom but the element is not aligned with the other text, U can add display:inline-block and transform:translateY(1px) to solve the other issue but this is not an elegant solution. Is there some other solutions? And I'm wondering why smaller texts work like that.
I linked a photo to make more clear.
screenshot
This seems to work without breaking vertical alignment:
p small {
line-height: 100%;
}
If you want your lines of text to always have the same height, so they match your background, use line-height property.
Any css tricks for getting text of any size to appear on the baseline for children inside one element that has float:left and another that has float:right?
Check out the jsfiddle link below to see what I'm talking about. Notice how the word "One" has a larger font so it bumps all of it's siblings in the float:left down, but it does not influence the spans in the float:right div.
http://jsfiddle.net/QeRhU/
I'd like for them all to appear on the same baseline. I'm hoping for a solution that still uses float:left; float:right; because I still want the liquid behavior that it gives when a user scales the page.
Try this, it's not the clean solution, but rather a workaround that could get the job done if you don't find a cleaner css solution.
I've been trying to learn some basic CSS/HTML by making myself a static web page. At the bottom of the page I want to show a few 32x32 image icons of websites I go to.
I want to display them inline and put them in the center of the page. Right now I have 3 icons so I created a block of width 96 (= 32x3) and simply center the container block.
However I think there's a good chance that I'll need to add more icons to the list, which means every time a new icon is added, I need to recalculate the width of the container block. I'm wondering if there is a rule in CSS that would save me from doing that?
For example I could simply do text-align: center for text field regardless of how many words I put in there. Is there something similar for image blocks?
Thanks so much!
UPDATE
As in cbp's answer, text-align actually also works for img tags. Thanks for pointing that out!
However (sorry for not having made it clear before), I didn't really use the <img> but rather <a> with CSS setting their background images. So I guess two follow-up questions:
1) Does text-align: center still apply here?
2) Is it preferable to use <a> (with CSS background-image) over raw HTML <img>? Any advantage to use either?
Thanks again!
By default text-align: center will have the same effect on images as it does on text, as img tags have display: inline by default.
So you can make the element that contains your imgs have width: 100%, then give it text-align: center.
Give Display:inline-block to your icon <a> Tag. Write like this:
.icon{
width:30px;
height:30px;
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
.parent{text-align:center;}
Check this http://jsbin.com/epusop/edit#html,live
text-align is a bit of a misnomer, as it doesn't act on just text. So, yes, you could just use text-align:center on the containing element for your images.
Sitepoint reference: text-align
you can use padding and margins in % from there parent 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/