I have been trying to position content within a table row. The row in question in turn contains 2 other tables and 1 small thumbnail image (each within a table cell of course). The row was positioned using valign="top" till now. This worked well getting contents of all the three columns to the top.
However, I wanted to position it using CSS position:relative; vertical-align:text-top;
This positions the cell content well if there is no thumbnail image. However, once the image is included, the other columns are not positioned at all. See the image below.
*Sincere Apologies for the Shoddy Image Formatting.
I want the two tables as well as the thumbnail to be vertically aligned to the top.
Please note that all margins and paddings are set to 0 and the sizes in the image are actuals.
Does somebody know why my browser (Firefox) is behaving this way and how to correct it?
Ok got it! It seems that vertical-align:text-top aligns an element to the top of the parent element's text and not to the top of the parent element! Changing it to vertical-align:top did the trick :)
Related
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I'm trying to create a list of products using a <table> since it's basically a table with rows and columns.
I want to have one of the columns list whether the item status is available or unavailable, and I'd like to represent this with a little green icon if available, red if otherwise. I also want that icon to be clickable to change it.
So I Googled and found I might be able to position it if it's a background image, but I want it clickable, so that's no good.
I've tried all the vertical aligns and centers etc.. that I've read and tried margins and padding and all sorts but I can't get my little icon image to be in the middle (horiz and vert) of my little <td>.
To clear something up:
I just want to know how to align the image within the <td>. The image itself is the anchor, when its clicked, the page reloads and the icon chanages. I've tried positioning this image within the <td> but can't. That's my question: How to position it?
Not sure why you are having difficulty aligning your image within the table cell. Tables contain many helpful properties that help with alignment. Here's an example table with images aligned to the center of the table cell.
http://jsfiddle.net/Puppies4Life/zka5Q/
First of tables should only be used for data and a list of products isn't data. I'd recommend using either plain old divs or a UL with lots of floated LI elements.
For your icon it would probably be best to make it an 'A' tag and either have the icon sitting as an image in the 'A' tag or have it as a background to the 'A' tag.
To align it horizontally make it's parent container text-align:center.
I'll assume that each product is going to be an image and be a set height? If so then to align it vertically simply make the padding-top of the container the correct height to set it in the center.
Hopefully the above will work for you :)
I'm working on a newsletter design (which means no use of the CSS background-image property), and I need to use a stretched asset on the left and right side of a table.
So I have this table with 3 cells : one on the left and one on the right for my image that needs to take the whole height of the table, and one on the center with some text.
Issue is that the isn't taking the entire height of the cell in IE (and Outlook). I've added a red background color to the cell to make sure it's taking the whole height available.
My code is a bit too big to be shown here, but you can see it live here
And here is a JSFiddle : http://jsfiddle.net/jXtNE/
Set the padding, margin to 0px; If it not works, just give the negative values to move the margin to the end of the page. For eg -10px. May be this is not a perfect solution. But it temporarily solve your problem.
Background: I'm using a photo shopping-cart that automatically generates a tables-based gallery from php, thus limiting me from too much flexibility. I'm also a novice.
Problem: The gallery puts out table cells that adapt in height to the content. When I have a full row of horizontal thumbnails the table cells are short and wide and when a row contains a vertical thumbnail, the cells are much taller. I want the cells to all be square, with the thumbnail sitting right in the middle.
I have access to input CSS in the style sheet, as well as a small section of HTML input but this HTML is inserted inside the individual thumbnail table cells; I have no access to edit the main table HTML. I have discovered class and ID names for many components using firebug.
What I've tried: I've tried to insert DIVs of a fixed size but the table still eats up any vertical space not occupied by the actual image. I've tried inserting a transparent PNG file, 180px x 180px into a div (which works to force the right size cells) and then put the thumbnail image (which is 150px x 150px) into another div and mess with z-indexing, relative/absolute positioning, etc. but I never got the two divs to stack on top of each other. Absolute positioning always aligned all 50 thumbnails to the top left corner of the page, not the table cell. Right now, the thumbnail div always comes up directly below the PNG div causing the table cell to be way too tall.
I'm stuck because I've tried everything within my skill-set and exhausted my googling. I think what I need is a way to either force the table cells to stay a certain height or find a way to make the thumbnail image overlay on top of the PNG.
Here is my current code, which is putting a 180x180 PNG (to force the table to the correct dimensions) in one div, and the thumbnail image in a second div, below the first div. Please excuse my sloppiness as I'm in no way a professional, just a tinkerer!
HTML inserted into individual table cells
<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>
And I have access to these additional classes & ids:
<table class="thumbnails_table">
<td class="thumbnails_cells">
I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:
td.thumbnails_cells {
width: 180px;
height: 180px;
text-align: center;
}
This is all it takes for me, 'cause my test image was already centred vertically (I think on account of its being inside a TD - default CSS and whatnot).
Hope this helps!
OK, I got this figured out...so simple, but hey when you've never done it before...
Based on good advice in another thread:
<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>