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.
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 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.
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }
I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)
So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;"> </span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.
My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?
This is way old, but I guess it's still worth answering. The reason your span isn't expanding is because it's still an inline element. set display:inline-block to get it to behave more like a block element
I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.
Try to avoid putting large spacers on elements and especially on multiple elements. The only way to add a spacer on your element would be relative positioning or an inline-block element (use carefully.)
Your best bet for the slideshow is to have a relative positioned <ul>. Since the <ul> is relative positioned you can set the <li>s to be position:absolute; within the <ul>. At this point you can set the <li>s to width:100%; and text-align:center; so that anything inside is positioned in the horizontal center (vertical centering in CSS2 is tricky.) Check out http://jquery.malsup.com/cycle/ which outputs inline styling by default but is still really nice.
Please have a look at this page www.pixeli.ca/issue.
I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens.
Thanks.
Simply adding float:left to the image fixes it.
<img src="imagetop.png" style="float: left;"/>
Not quite sure why or if there's a slightly more accurate method but hey, there you are.
Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.
set image to display:block and it should work.