Html css align image with text

css: vertical-align image with text inside span

As you can see I have styled the image vertical-align: middle but still the image is misplaced at the bottom. How do I get it centered between the top and bottom borders? EDIT: Here’s a good rundown of this issue: http://phrogz.net/css/vertical-align/

6 Answers 6

How do I get it centered between the top and bottom borders?

You can try using the CSS flexbox .

Check the following example:

  My text  My text 

Thanks! In the end, this seems to me the simplest, general way to fix the code. Did not need to specify span.padding and img.margin, though — the defaults work fine for me.

Using vertical-align: middle adjust the image with the texts height, and as you can see in my screen-dump, the image is exactly between the text’s top/bottom (I added 2 green lines to visualize it).

The «empty» space between the text and the top border, is how a particular font (and this is different for different fonts) arranges the characters within its internal height.

Now, for what ever reason, if you want to «break» this and adjust for example an image within a fonts internal height (as in your question, between the top/bottom borders), you need to add «margin» somewhere.

To let the text flow as normal as possible, you could:

• add a few pixels margin/padding to the image element
• add a few extra lines of pixels with full transpareny on the image

Note: Based on how perfect you want this, you need to calculate the «margin» on the font you use (it can/will likely be different), the font size, and you also might want to check on different OS’s as well.

To «force text/image» to center, you could:

Here is samples using «padding» and display: table :

/* padding */ span img < padding-bottom: 3px; width: 20px; vertical-align: middle; >/* display table */ div < display: table-cell; vertical-align: middle; padding: 5px; >div span < vertical-align: middle; >div img

 This one  use padding 
 
 
This one  use display: table 

Источник

Vertically align text next to an image?

Actually, in this case it’s quite simple: apply the vertical align to the image. Since it’s all in one line, it’s really the image you want aligned, not the text.

  
  Works. 

Now you can use flexbox for this type of layout.

 
  Works. 

The flex solution is better than the vertical-align solution because it handles the case of multiple lines of text also.

The vertical-align: middle approach works well only if you have one line of text and you apply vertical-align: middle to both elements.

Here are some simple techniques for vertical-align:

One-line vertical-align:middle

This one is easy: set the line-height of the text element to equal that of the container

 
 Doesn't work. 
 

Multiple-lines vertical-align:bottom

Absolutely position an inner div relative to its container

 
This is positioned on the bottom
 
 

Multiple-lines vertical-align:middle

 
This is positioned in the middle
 
 

If you must support ancient versions of IE

In order to get this to work correctly across the board, you’ll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn’t support: advanced CSS selectors.

 #container < width: 30px; height: 60px; position: relative; >#wrapper > #container < display: table; position: static; >#container div < position: absolute; top: 50%; >#container div div < position: relative; top: -50%; >#container > div 
 
Works in everything!
 
 
 

Variable container height vertical-align:middle

This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)

Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:

position: relative; top: 50%; transform: translateY(-50%); 

The display:table and display:table-cell CSS selectors work great, except, of course, in IE7 and below. After tearing my hair out for several hours, I decided that I didn’t really need to deal with anyone that still used IE7-.

Change your div into a flex container:

Try different width and height values on the img and different font size values on the span and you’ll see they always remain in the middle of the container.

In order to center the text next to or between images (horizontally on the page), you need to also add justify-content: center; and for spacing (without using
tags) you might also want to throw in a padding: 1em; . Great update for us modern browser devs.

This worked well. I tried each and everyone of the other answers, and while they worked to a degree, it didn’t work for me. I had about 3 lines of text to align, and this answer worked perfectly. Thanks @Mori

You have to apply vertical-align: middle to both elements to have it been centered perfectly.

 
 Perfectly centered 

The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:

On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.

Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.

The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box’s baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).

Источник

How to align text below an image in CSS?

If I add a paragraph text between img1 and img2 they get separated (img2 goes to a newline) What I’m attempting to do is this (with some space between the images):

[image1] [image2] [image3] [text] [text] [text] 

I haven’t given the images their own individual class names because the images don’t align horizontally to one another.

7 Answers 7

Add a container div for the image and the caption:

 
 Text below the image 
 

Then, with a bit of CSS, you can make an automatically wrapping image gallery:

 
 Text below the image 
 
 Text below the image 
 
 An even longer text below the image which should take up multiple lines. 
 
 Text below the image 
 
 Text below the image 
 
 An even longer text below the image which should take up multiple lines. 

Updated answer

Instead of using ‘anonymous’ div and spans, you can also use the HTML5 figure and figcaption elements. The advantage is that these tags add to the semantic structure of the document. Visually there is no difference, but it may (positively) affect the usability and indexability of your pages.

The tags are different, but the structure of the code is exactly the same, as you can see in this updated snippet and fiddle:

Источник

How can I align text directly beneath an image?

I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?

5 Answers 5

 
 
Some text
 
 

If you know the width of your image, your CSS:

.img-with-text < text-align: justify; width: [width of img]; >.img-with-text img

Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.

If you would float the div itself to the left or right you do not need to set the width and the content is still centered. Html/css should center automatically according to the biggest component and not to the full-width.

and to get the image width, a couple of approaches: stackoverflow.com/a/5633302/227926 and stackoverflow.com/a/623174/227926 In turn these need the image source path, how to get that, here: stackoverflow.com/a/2765186/227926

how do you position the image using this format? when i set position:absolute so that I can put the image where I want to, the text just hides behind the image.

this is because you’re pulling the image out of the document flow by setting position:absolute , meaning the text has no concept of the image. you’re better off positioning the image using margins or padding or even position:relative

Источник