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.
Related
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
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.
i got a question about how to center a text inside a div in html / css.
I have a h3 tag like this
<h3>Pacuraru Daniel Pacuraru Daniel</h3>
or
<h3>Pacuraru Daniel</h3>
and the css
h3 {
width: 100%;
height: 28px;
display: block;
}
If I have a name longer than 1 line, then the 2 lines of the text fit in the div, but if there is only 1 line, I want it to be vertically centered not aligned on top.
EDIT: i have this layout and i want in the both divs the text to be centered vertically
http://jsfiddle.net/shRRz/3/
I have found the way to do it. It seems i need to use this css to make it align like i wanted.
display: table-cell;
vertical-align: middle;
Thank you very much for the tips, people.
I'm working on creating an image gallery where an image is centered in the entire page. The horizontal part is of course easy, but the vertical part is giving trouble.
I'm familiar with using display: table-cell; and vertical-align: middle; (or using line-height, but am not having success when using them along with trying to get the element to fill the page.
<div id='contain'>
<img src='url' />
</div>
I can't set the line-height of #contain since the height of the container will vary based on the size of the window.
If I absolutely position #contain, applying vertical-align:middle no longer centers the image vertically, regardless of how I set the size of the box.
If I try to size #contain to fill the window without absolute positioning, width: 100% and height: 100% (or using min-width/min-height) do not fill the page. Again, I can't specify exact values since they'll vary.
I know I can always set the image to be the background of #contain (or use JavaScript to figure out the heights), but if there's a CSS/HTML way of solving this without tables I'd prefer to use that.
Try to wrap your img in an extra div and then use the following css:
#contain {
display: table;
width: 100%;
height: 100%;
}
#contain div {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id='contain'>
<div><img src='url' /></div>
</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.