So I have some generated html that I am attempting to style. The html seems fairly normal to me, and the css I am trying to apply is minimal, but it is acting in a way that I would not expect.
The html places a div with an anchor tag, containing both an img and some text inside the div, wrapped (for some reason) in a span.
div {
border: 1px solid black;
height: 40px;
}
.title img {
height: 100%
}
<div>
<span class="title ">
<a href="http://www.google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Commons_app_72_72px.png">
<span>Sample Text</span>
</a>
</span>
</div>
As you can see, the link text is outside the border of the div.
If I get rid of the image, the text is aligned properly, but adding the img seems to stretch the containing span outside the borders of the div its supposedly contained in, despite the fact that the img is not any bigger than the div and does not stretch to the new size of the span. It almost looks like the img and span inside the anchor are not aligned and the span is stretching to allow them to be weirdly offset.
The weird nesting of the div and span with class title is not something I have control over, so if the solution to my problem requires changing that, please explain why.
How do I get rid of this weird behavior?
An image, which is an inline element by default, is provided space underneath for descenders.
One way to resolve the issue is with vertical-align.
So instead of:
.title img {
height: 100%;
}
Try:
.title img {
height: 100%;
vertical-align: bottom;
}
DEMO
Learn more about descenders here:
Mystery white space underneath image tag
Why is my textarea higher up than it's neighbor?
Just add vertical-align: middle for image:
.title img {
height: 100%;
vertical-align: middle;
}
If you want to align text by top boundary than set vertical-align to top.
Images are inline element. By default strings are aligned to the baseline. Since image larger than text line height, text is aligned to the lower boundary.
Related
I nested one img tag into one a tag. Here is the html:
img {
margin-bottom: 40px;
}
section a:nth-of-type(1) {
background: green;
height: 100px;
width: 200px;
}
<section>
<a href="https://www.adelaide.edu.au/" target="_blank">
<img src="../image/soccerAndWorldCup.jpeg" alt="uniAdelaideLogo">
</a>
<a href="https://www.w3schools.com/html/" target="_blank">
w3school
</a>
</section>
It seems that the image is not wrapped in the 1st tag. Instead, it is below the image the 1st a tag is below the image. However, its dimension is correctly set when I tried to inspect itthe dimension of the 1st a tag. The margin of the image is correctcorrect image margin.
Could someone help to explain why? Many thanks.
A quick complement: is this because anchor tag is inline element and img behaves like inline-block element? I tried display: inline-block for the 1st a tag and the image is wrapped. Is my understanding correct?
display: inline ignores the width and height properties; inline-block does not.
So if you keep the a at its default inline, its width will be solely determined by its content (the img inside) and its height will be the default for one line. Since the whole of the box will be higher than that though, the a will appear to sit at the bottom of the img (inside the img's margin). In reality, the img is in the a, but overflows out of it.
Does that explain things?
I'm guessing it's a whitespace issue here. The browser renders a single space for every row of spaces/tabs between tags.
Try this:
<section><img src="../image/soccerAndWorldCup.jpeg" alt="uniAdelaideLogo">w3school</section>
There is section inside which i have defined text-align as left for a line but its not taking effect for some reason
<section id="topic1">
This is a centered Heading for Topic 1<br>
<span class="text">This is a left aligned line</span>
</section>
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: inline-block;
text-align: left;
}
I tried display: block for text span tag in above code and text got aligned to left but i am looking for a alternative way to do this
Reason for finding alternative way - Even tho block display is aligning text to left , keeping display as block for all the span tags within my webpage increases the space between each span tag for some reason
Practical example below
<span class="text">This is line 1</span><br>
<span class="text">This is line 2</span>
.text {
display: block;
}
If you check output of above code there would be space between line 1 and 2 because of display block .
I am okay with using display : block to make text align work for span tag
But then this unnecessary space created by block display bothers me
Isn't there any way to avoid that unnecessary space ( seen between line 1 and 2 ) created while using block display
An inline-blockelement is only as wide as its contents, in your case NOT the full width of the container.
In their container inline-blocks are aligned according to the text-align setting of the parent element (= the container, in your case #topic1), thats why they are called INLINE-blocks.
So if you want it left-aligned, you have to change the alignment of section to left. And wrap your to be centered text in a heading element (like <h1>...</h1>, wich is a block element having 100% width by default) to which you apply text-align: center. And BTW, that would also improve the semantical quality of the HTML - headers should be wrapped in header tags.
About "unneccessary vertical space between lines": That the default margin-top and margin-bottom of these elements - you can reduce those by defining them in the CSS for the according elements)
You can do something like this using margin. This will allow you to adjust the spacing between the blocks. Also, you can remove the br tags.
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: block;
text-align: left;
margin: 10px 0;
/* CHANGE THIS VALUE */
}
<section id="topic1">
This is a centered Heading for Topic 1
<span class="text">This is line 1</span>
<span class="text">This is line 2</span>
</section>
You have a space after the period.
To select class="text", use:
.text
not
. text
Try adding float: left instead of text-align:left. As span element or inline-block element take only fit width. float will help align the item with respect to parent.
https://codepen.io/pratik-sangami/pen/dybKMVz
I'm using a span element to create a container for an image with a caption. I want to center the image on it's own line, just like I would center an image using <center> and <img>.
When I use the span container with "float", it works, but as soon as I remove the "float" property the I can no longer set the span width.
<span class="imageholder" style="width:150px">
<img src="https://gallery.mailchimp.com/37f4256f7c29a1b3335eb535e/images/62f05d38-ae67-40d1-bf14-7773330b8169.jpg" width="100%" alt="Roux and Mary at the Good Food Festival">
<span class="caption" style="width:150px">Roux and Mary at the Good Food Festival
</span>
</span>
jsfiddle
The top image is the result I am looking for, minus the container. The middle image shows the container with caption, using "float:left". The bottom image is the one I'm trying to center.
Thank you!
<span> is an 'inline' element. You're attempting to treat it as a 'block-level' element. Adding float: left; forces it to become 'block-level', and then you can apply something like width: 100%; text-align: center; to center the image within. An alternative to float: left; is to set display: inline-block; on your span tag. This leaves you with much the same circumstance though... you'll need to add width: 100%; text-align: center; to center the nested image.
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/