I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.
Related
In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.
<div class="rs-paging">
<div class="rs-pageclick">
<img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
</div>
.rs-pageclick img {
cursor:pointer;
display: inline-block;
margin-top: 15px;
}
http://jsfiddle.net/paull3876/qds8pnfx/2/
I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it ssems the same with padding or margin.
I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding. This is driving me nuts !
thanks
The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.
Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.
http://jsfiddle.net/nea4w6h3/1/
Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :
https://jsfiddle.net/qds8pnfx/5/
I want to center picutes in a span. The span has the class centerMe but it doesn't affect the pictures.
Markup of centerMe:
.region.region-footer .centerMe{
text-align: center;
}
You can find this example on JSFiddle.
Thanks for any help
It is not happening because span is an inline element.
text-align:center does not affect it because total width of images and width of span is exactly same. If you give it 100% width, then only you will see the difference.
Also, width property will not work on inline element so change it to block or inline-block.
Add width to the markup:
.centerMe {
width:100%;
display:inline-block;
}
Updated fiddle here.
Another solution is to use any block element like div,p or section rather than using span.
You can't use text-align: that way on inline elements.
If you want to achieve that, you will have to change your span into i.e. a <p> element, which is a block.
The span itself doesn't have full width, so there is no space to center the images in.
You can solve this by changing the span into a div.
Or you can make it behave like a div by adding display: block to the CSS:
.centerMe{
display: block;
text-align: center;
}
Alternatively, you can give it width: 100%, like Hiral suggested but then you will have to take any borders, padding and margin into account as well. By making it behave like a block element, it will automatically occupy the available space, and I think it is a more flexible solution.
I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.
Here's an example: http://jsfiddle.net/alecrust/zstKf/
Here's the desired result (using display:block and defining a width): http://jsfiddle.net/alecrust/TmwhU/
If you want to avoid setting an explicit width so you can style the background according to the actual length of the text, you can do the following:
Wrap your link:
<p>To stay up to date <span>Follow Us</span></p>
Note that I have added a <span> tag around the link.
Style your wrapper with CSS:
span {
display: inline-block;
width: 100%;
}
Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.
Forked JSFiddle: http://jsfiddle.net/Cm9kZ/
It's a bit of a kludge, but it will work:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.
The closest I can get to what I want is using :before to insert a new line before the <a> (Fiddle). This unfortunately doesn't clear it to the next line though.
This only works if you want to line break after the last element in the p.
I've experimented quite a bit and this works for me, in Safari 6:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
I have not tested this in other browsers, but it's so simple it should work in all browsers supporting display: inline-block.
An empty <div/> after the inline-block element, clears the inline-block.
With the requirements you have, I don't think it's possible.
I was hoping that this would help, but it doesn't because you don't have an element before your link.
You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/
Using the pseudo class :: after you could add content with a clear:both; property to it.
Not tested but should work in theory.
I just wrote the following code
<img src="http://www.lorempixel.com/100/100"><img src="http://www.lorempixel.com/100/150" id="test">
#test {
text-align: center;
}
But the image is not centering. I also used text-align: right which did not work either. I can use float and margin-left but I'm curious why its not working with text-align.
Have a look at text-align css property as described on w3.org website. It says that this property applies to block containers.
Now, the <img> tag itself is not a container (it cannot contain any thing) hence the text-align property does not work as expected. To make an image center-align, there are various ways; the simplest of them is to specify text-align: center on its parent element.
This property specifies how the inline content of a block is aligned,
when the sum of the widths of the inline boxes is less than the width
of the line box.
Try putting the img in a div with inline-block specified and the first image as the background image of the div.
something like:
<div style="display: block; text-align: center; background-image:url([your_first_image]);">
<img src="[your_second_image]"/>
</div>
However, this probably will not work on an image, you need to use float, padding or something of that nature.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
It should work! It worked for me :D
text-align is used for aligning the text within an element. An img element has no text inside of it to center, so it does nothing. float, which floats the element within its parent, is probably what you want here.
Not the best practice text-align to align images.
"The tricky thing about the text-align property is that you can only align text with it - you can't use it to move block-level elements like images. Some browsers will align images or tables with this property, but it's not reliable, as you've found." --Jennifer Kyrnin, About.com
You can use the deprecated img attribute align="center", Although you won't use. This way tags and style are mixed, and, to worsen, there are vertical and horizontal spaces around the full image.
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way
The best way to solve this is using CSS. Setting the image as div's background then the div's space will be your image's space and you can use margins to put it in place. You can try to use one of these others techniques
CSS background-image Technique:
background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0 no-repeat; /* div horizontal center */
background:url('path_to_img') 0 center no-repeat; /* div vertical center */
I try this and it works fine :
In the CSS:
.centreimage {
text-align: center;
}
In the HTML:
<p class="centreimage">
<img src="Images/blababla.png">
</p>
Another way -- you can wrap it around a table. see below.
We had to do it this way in a stylesheet.
<html>
<table border="0" width="530" >
<td align="center" valign="center">
<img src="http://www.lorempixel.com/100/150" id="test">
</img>
</td>
</table>
</html>
Consider learning about the CSS display property, a very important CSS property in my opinion, at least when dealing with positioning and alignment. The property is set to different values on different elements by default. Assuming the position property is set to the static value, block and inline take up the entire parent element's width. block will be on its own line while inline shares the line with other elements.
Elements like p tags and h1s are block level elements. Elements like span tags and ems are inline elements. Images however are neither!
Images have a default display value of inline-block. This means it has the characteristics of inline and block elements - You can set the width and height (like block level elements), it is on the same line as other elements (like inline level elements), and the container is the width and padding - nothing else.
The CSS rule text-align: center; centers the element in its container. This means for p elements it will be fine because the display is set to block. For images, however, you cannot center it (so nothing will happen) unless you put it in a div (parent element container) because, assuming the width is set to 100%, there is nothing to center it in, nothing to be aligned with. Consider the following example:
body * {
border: 1px solid black;
text-align: center;
}
<body>
<p> This is a <span> !!Span element containing!! paragraph !!Span element containing!!</span>about lorem ipsum, the infamous place holder text. Lorem ipsum is supposedly Latin, but not really. That's all. </p>
<img width = '200' src="https://i.stack.imgur.com/zZTPs.png">
<p> The display of p is block, span inline, img inline-block. That's why the image's border doesn't stretch and the others do (you may not notice it but they do)</p>
</body>
A good workaround is setting the display to block. This will make ti stretch so there is something to center it in. As soon as there is something that acts as a parent container, ether it be changing the display (the border is what you are aligning it on) or enclosing it in a div (the div is what you are aligning it on) the aligning will then work.
because it is "text"-align.
the property is designed to work a certain way and given a certain name.
Interestingly, if a the property is applied to a container that has image+text then the alignment works for text as well as image.
.one{
text-align: center}
<div class="one">
<p>hello pal</p>
<img src="https://cn.i.cdn.ti-platform.com/content/22/showpage/regular-show/za/regularshow-200x200.png">
</div>
I have this code:
<div id="one">
<div id="two">my text here</div>
</div>
I have styled the div with id=two and put a box around it. The problem is that it doesn't enclose the text but instead expands to the width of the outer DIV. Is there a way I can make it just size to match the text without specifying width?
You can either
#two {
display: inline; /* or 'inline-block' */
}
Or:
#two {
float: left; /* or right */
}
display: inline; stops the div being displayed as a block-level element, causing it to collapse (for want of a better word) to the size of its contents. If you use the alternative display: inline-block then the div retains its ability to have a defined width and height, which may be required for your layout. However it's worth noting that Internet Explorer 6 and 7 only accepts display: inline-block for those elements that are 'naturally inline.'
float has much the same effect; but using float might/will obviously affect the layout of the page, and may need to be cleared by subsequent elements.
display:inline-block;
This way you keep the block behaviour of your div.