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/
Related
My <ul> element has some <li>'s containing text, and one containing an image. I want them to appear in a single line, centered horizontally within the parent element, and also their <li> contents centered vertically and horizontally. I have the following code:
http://codepen.io/littlemissintrovert/pen/NqqLRr
By far, it's going great, however, I have an issue with the <li> containing an <img>. It's positioned higher than other <li> elements.
I can't find much resources to help me with this issue. Maybe I suck with searching but I found this link: List items appearing below other list items containing images. It seems we have the same problem and someone suggested there to use:
display: table-cell;
vertical-align: middle;
However, when I try to use it, I am unable to center the <ul> horizontally, relative to the size of its parent container. Plus, I can't space out my <li> elements using margin.
As much as possible, I really want to avoid defining the width. I want my elements to span across the screen 100%.
for fixing img issue
Add display:block to the a tag as it is a inline element
Add vertical-align:middle for the img tag as img is a inline element it will align it vertically middle
you can also use this technique to add the margin on the left side of the li
#mainnav li + li{
margin: 0 0 0 3em;
}
which will only give style to the next element
demo - http://codepen.io/victorfdes/pen/pJJORw
Just add vertical-align:middle to image will solve your issue:
Check your updated Codepen Here.
I'm trying to add caption of images on top of the image. These images should be floating in a grid-like system (without an fixed height!) like in the fiddle I made over here http://jsfiddle.net/thomasjonas/GzjuM/3/
You can already see te problem... Because of the absolute positioning of the title and image inside the relative item div, the relative item div doesn't get the appropriate height, but just the height of the border... How can I fix this? I have looked for answers everywhere, but most of the time the problems of others are solved using a different approach. The only other approach I know for my problem is using an image as a background for a div, but then I need to know the width and height of my image... What is the best solution for this problem?
Don't position the images absolute. Instead render the <div class="image"> elements as block (using display:block if you changed your div style somewhere) and set up a margin instead of fiddling with absolute positioning:
.item .image{
display:block;
margin-top: 1em;
margin-left: 1em;
}
JSFiddle
When a div is styled as "inline", it seems all its dimension variables lost effect.
for example
<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
gives me a big box, but after I add inline style, the box shrink to the smallest size.
for example
<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
My question is, is there a way that I can keep the div inline (same line as some preceded text) and at the same time able to fix its size. (either div or span)
Thanks.
The width of inline elements is ignored. From my experience, in cases like this using a float will solve the issue.
You can also use inline-block, but if you have to support older browsers you may not wish to use this.
The floated div will float to the left of the the nearest block element parent (assuming this parent is also not floated). If you need more control of where the div is floating, add a wrapping (non-floated and block) div around your floated div
Use display: inline-block or (better) display: block; float: left
Use display: inline-block;
PS: inline-block is not available in some older browsers.
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 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.