I need to have text and image so that they are vertically aligned together. Specifically image should be vertically positioned at the middle of the text. What's the best way to do that?
One constraint: the content of my <img> tag is retrieved from external source and it would be great if I could leave <img> tag unchanged (no attributes added).
Sample:
<div>Some text <img src="http://somewhere.com/someimage.png"/></div>
img { vertical-align: middle; }
Might be best to add a class or id to the img or surrounding div though as this will affect all img tags on the page
div{background:url("http://somewhere.com/someimage.png") 50% 50% no-repeat; line-height:1.5em; text-align:center}
should do it. depending on font-size
Related
I'm trying to understand text-align but it seems it acts with different rules based on what type of element it is applied to and where it is applied from, whether a parent or a child element.
To my knowledge, if I apply text-align:center to a div, then all of the containing elements will have a text-align:center property as well.
If I apply text-align:center on an inline element like an image, nothing will happen because the image has no surrounding space that is part of the element. I have this code and I have no idea why it behaves the way it does. What I'm trying to achieve is to simply center an image horizontally within a header tag and I achieve it this way:
body {
margin: 0;
}
header {
background-color: black;
height: 100px;
text-align: center;
}
img {
height: 100%;
}
<body>
<header>
<img src="logo.png" alt="Logo image">
</header>
</body>
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen? Isn't the image supposed to be aligned within its own space, and since there is none, it shouldn't work? I thought that saying text-align:center in a div would be like typing it for each one of the containing elements as property so it was just a quicker way of doing it. But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
If I have a header with an image inside, isn't saying:
header{
text-align:center;
}
the same as saying:
img{
text-align:center
}
because the child elements get applied the parent property to them as well? I thought text-align would only act on the child elements of the element it is used on. but then why doesn't it work if I declare it on the image?
Even, though I tried to set the image to display:block and set text-align:center on it, this time I was sure it would work, but it didn't. Why?
If I use text-align:center on a p element, which is a block element, the element is centered within its own space, shouldn't that happen too for images that are set to display:block?
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen?
Images are, by default, display: inline, which causes them to be treated (more-or-less) the same way as a character of text.
But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
text-align describes how the inline content of the element should be aligned within the element.
An img element has no content.
If I use text-align:center on a p element, which is a block element, the element is centered within its own space
No, it isn't. The text inside the paragraph is centred. The alignment of the paragraph itself is unaffected (by default a p element is with: auto so will completely fill the available horizontal space after margins, borders and padding are accounted for).
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
In the following snippet, header is a block level element. img is an inline level element. And so the image is horizontally aligned to the center of the parent block level element.
header{
text-align:center;
}
<header>
<img src="https://placekitten.com/100/100" alt="kitten" />
</header>
Is the following snippet the same as the above? No. Because text-align:center is not applied to a block level element that contains inline-level content.
img {
text-align: center
}
<img src="https://placekitten.com/100/100" alt="kitten" />
My prime objective was to create webpage with a heading with a border, and text underneath it which is as wide as the border of the heading (so if the heading with the border is 500px, then the text underneath should be directly underneath it, ie have a width of 500px).
I have used text-align: center; in the body tag already, so as to align the heading of the webpage to the center. I assumed everything written in the body tag would be centered automatically since they are all nested in body.
Inside the body, for the actual text written in the page, I've used a <div class="content"> container. I know that it has been applied satisfactorily to the actual text because all other formatting applies onto it as expected.
However, when I write width: 500px; inside the .content{}, the text suddenly goes into a left alignment. I tried to use text-align: center; in the .content{} class too, but even that didn't align the text in the center.
What am I missing here? Why isn't the actual text being displayed in the center, directly underneath the heading?
Thanks in advance!
For div tag when you set a width you also need to say that the div is no more block but inline-block elsewhere it becomes a block with the specified width. So one of these solutions works:
.content{
width:500px;
display:inline-block;
}
or
.content{
width:500px;
margin:auto;
}
You have given the div a specific width in pixels. To make sure it is centred within your page you should apply a margin:0 auto css rule to it so that it will automatically calculate the side margins to center the element.
Be aware that the margin:0 auto technique does not always work. Here are the rules for it to work:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position
The element must not have auto as width value
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.
In my layout I've got some teaser text and an image which is floated to the left so the text flows around it.
Then I have got a "Button" which you can click onto in order to show the complete text.
This "Button" should be displayed below the text and fill the whole width.
This is no problem as long as the text is long enough to wrap below the image so I can use e.g. display: block to make it 100% width. But when the text is short I don't find a way to make an element which fills 100% of the remaining width.
https://jsfiddle.net/ybtshvqL/
In the website I'm building I use this button with an transparent-to-white background and moved some distance to the top in order to fade the lower part of the text to make it more visual that there is more text available. When using something like a div / block element it always gets drawn 100% of container's width and renders ugly over (or below) the image.
So is there some way to make either a span (display: inline-block) 100% width or a div (display: block) to honor a float?
(or some other good ideas?)
Thanks in advance.
This is a simple fix if you are willing to change the <span> to a <div> tag.
HTML:
<div class="container">
...
<div class="more">Read on ...</div>
</div>
CSS:
.more {
border: 1px solid red;
width: 100%; /* Or another preferred width percentage */
margin: auto !important;
text-align: center !important;
}
http://jsfiddle.net/rtkbykbu/
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>