I have a simple span on my page with a class eah-logo-img, and inside of my CSS, I have tried to set the background image for it. However, It is not working for some reason.
This is my HTML:
<span class="eah-logo-img"></span>
and this is my CSS:
.eah-logo-img{
width: 150px;
height: 150px;
vertical-align: middle;
background: url('img/logo_def_white.gif');
background-size: auto;
}
My image is inside of the img folder (inside the same folder as the CSS; so it should be working.).
I have made sure the name is right, and I have checked Chrome inspect element and made sure the link is correct.
I am unsure why this isn't working.
Cheers.
Your span element has no actual width or height – and therefor you do see little of any background, because it is displayed in an area that is 0*0 pixels big.
width and height by definition have no effect on inline elements (which span is by default.)
So add display:inline-block or display:block to your span, or float it, or position it absolutely – so that width and height are allowed to have an effect.
In your css add
display:block
or
display:inline-block
better yet do not use span if you want to define the width and height, use div instead.
Related
Button and div acts differently with the same styles. Actual difference in width: div have 100% of parent width, while button acting like display: inline; with minimal width, no actual inlining. And both have display: block;.
That strange button behavior is what I'm trying to achieve with div. Problem is that 'width: auto;' works in another way. So I'm gave div's same style as button have by default in chrome. As a result there is one property sets differently: -webkit-appearance, but changing it make no sense for width or display property.
Codepen
Also I'm tried to achieve that with display: flex;, but width becomes 100%.
If there's another way do achieve this, it have to deal with parent height: 0px and display: absolute
A button is displayed as inline-block. If you want a div to 'act' the same way
display the div as an inline-block as well. As to why buttons behave this way
see the following post:
button behavior
div{
border:black solid ;
display:inline-block;
}
<button></button>
<div>x</div>
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.
Why does padding and margin work on block img, but not on inline.
I am having a layout problem with my images in CSS. I want no pixels (no margin, no padding) between each image, and I want a row of 4 images.
The only way padding or margin (setting to 0) works is if I use display:block as part of the style for the image. As soon, as I use inline, there are several pixels between each image and the padding and margin is ignored.
Anyway that I can get my own paddings and margins in images that are inline?
So you want an image to display inline, but act as a block?
Have you tried display: inline-block;?
I've found wrapping all img to div as a really useful practice.
<div class="image">
<img src="/path/to/image.jpg">
</div>
It is userful for adding any additional actions with images.
For example, you want to crop all of them to fit 400x200 block. You just do:
<style>
.-crop {
overflow: hidden;
}
.-crop img {
min-width: inherit;
min-height: inherit;
}
.image {
width: 400px;
height: 200px;
min-width: 400px;
min-height: 200px;
}
</style>
<div class="image -crop">
<img src="/path/to/image1.jpg">
</div>
<div class="image -crop">
<img src="/path/to/image2.jpg">
</div>
When images are wrapped, it is easier to solve some tasks. You need to make images bigger on hover? They are wrapped, you change img size, but not div, so your layout is ok. You need images to slide up with 20px on click? Same strory. You want them to be in center of some 400x200 area? They are wrapped, add vertical-align and text-align to div.
Of course, in common cases just img is fine. But when suddenly you have to add some additional actions -- you need to wrap them. So i wrap them everytime even if there is no need at the moment. Just for future.
You could use display: block and float:left if you want to have more images in one row.
I have a simple DIV with a fixed height like and several images with individual heights inside (their height is equal or less the height of the outer DIV):
<div>
<img src="..">
<img src="..">
...
</div>
This markup is as-is and can not be changed. I need to display all images side by side and all images should be vertically aligned with the middle of the DIV (so the padding top and bottom is identical per-image).
How to do that without changing the markup? Various answers deal with a markup where the image is placed itself inside a DIV which is not the case here.
After re-reading your question, that the <div> is at least as high as the highest image, simply do this:
CSS
img {
vertical-align: middle;
}
Try it here: http://jsfiddle.net/AsD9q/
You can also prevent the div from breaking (when the viewport is to small) by setting an explicit width or using white-space: nowrap; on the container: http://jsfiddle.net/MvDZJ/ (using width) or http://jsfiddle.net/xMtBp/ (using white-space)
That's the outcome:
First answer, which works with every height of the div:
As you said nothing about container itself, I assume, that it's not wider than the viewport. Than you could simply do something like this:
HTML
<div>
<img src="http://lorempixel.com/200/100/">
<img src="http://lorempixel.com/200/80/">
<img src="http://lorempixel.com/200/120/">
<img src="http://lorempixel.com/200/60/">
</div>
CSS
div {
display: table-cell;
vertical-align: middle;
/* only added for demonstration */
height: 200px;
border: 1px solid red;
}
img {
vertical-align: middle;
}
This won't work in IE7 though, as it can't handle display: table-cell. You can try it here: http://jsfiddle.net/3vXXy/.
This can be done with jQuery, the problem is you have no explicit selectors to work with so it would affect every image in every div on the page.
First you need to set the images to the top of the div like this in the CSS:
div img{vertical-align:top;}
Then take each image in succession, get it's height and set it's top padding to half the difference between the height of the div and the height of the image.
$(document).ready(function(){
$("img").each(function(){
var margin= ($(this).parent().height() - $(this).height())/2;
$(this).css('margin-top',margin);
});
});
Again, not an ideal solution without good solid selectors, but it does work. http://jsfiddle.net/calder12/H4Wkw/
I have an img element with style='width:40%;height:40%;'. I would like to add a div that automatically wraps it. However when I insert the div instead of wrapping the img it just expands to the div inside.
How can I force this div to wrap img so it can be used as a frame. The reason why I do not preset the div's height and width is because img's percentages will be given dynamically, so div should wrap the img according to img's sizes.
If you do it like this
<div id="wrapper">
<img src="...">
</div>
you could add the display: inline-block; attribute to the wrapper. That did it for me. Yet still, your style='width:40%;height:40%;' will make its height being adjusted by its parent as #jesse-van-assen already mentioned.
The problem with a width and height of 40% with an image tag, is that the image isn't downscaled to 40% of it's original size, but takes up 40% of it's parent, as you can see here.
In your case, you want to wrap the image in a div, but still want to size it to 40% of it's parent. In this case, the parent IS the wrapping div. You see the problem.
If you just want to use the div as a frame, you can use css to style the image to gain a similar effect, like this:
<img src="..." style="border: 1px solid #000000; padding:10px;"/>
Example of this principle here.
make all your images float to left.
img
{
float:left;
}
and clear each div with
<div style="clear:both"></div>
as the very last element in the wrap div before it closes.
hope it helps.