I'm trying to align an image and an heading vertically. I'd like to do this in a table because is should be some kind of a menu. So there are more of this 'segments'. The img and the heading have to be in the same td-element for some further functionality of my menu...
I've tried vertical-align: middle, display: inline-block & table-cell and many things more. But nothing seems to work for me. The h2-element seems to ignore all of this thinks and stick to the top.
img{float: left; height:100px; width:auto}
td{width: 300px; verical-align:middle}
<table><tbody>
<tr>
<td>
<img src="http://placehold.it/70x70">
<h2>TEXT</h2>
</td>
<td>
<img src="http://placehold.it/70x70">
<h2>TEXT</h2>
</td>
</tr>
</tbody></table>
Here is a fiddle of my problem https://jsfiddle.net/0x48n7qL/
How do I archieve this? What am I missing out?
EDIT:
The actual size of the image and therefore the height of the row is relative to the size of the page so I can't use fixed height values.
Add to your h2 those properties :
line-height: 100px;
margin: 0px;
https://jsfiddle.net/0x48n7qL/1/
There you go:
img {height:100px; width:auto; vertical-align: middle;}
td {width: 300px;}
h2 {display:inline-block; vertical-align: middle;}
https://jsfiddle.net/nr3j6Lco/2/
Related
Full Source Located At: http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeComponent.html
Problem: There is an HTML div that is being used for a web page header, ultimately containing a table that has three columns for the left logo, a center title, and a right logo. I set the div width to "100%" in the CSS statement but the div is not dynamically expanding, in a horizontal direction, to fit the width of the window.
In short, the SVG canvas, further down in the page, requires a wider div and I'd like to get all the other full width divs to expand horizontally to keep things neater.
The div code looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_HeaderLeft"><img src="../../IMAGES/SITE_HEADERS/IF4IT_Logo.png" alt="Header Left Image" /></td>
<td><img src="../../IMAGES/SITE_HEADERS/Title_Gold_Shadow.png" alt="Header Center Image" /></td>
<td class="td_HeaderRight"><img src="../../IMAGES/SITE_HEADERS/NOUNZ_Logo_DarkBlueAndGold.png" alt="Header Left Image" /></td>
</tr>
</table>
</div>
The CSS statement being used is:
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
I've tried adding "overflow: auto;" as is recommended in this other SO post on the topic. However, it doesn't seem to work.
Any thoughts on how best to fix the issue?
You need to 0 out the padding and margin on the body element to prevent the browsers native stylesheets from applying those attributes which prevents you from having a true 100% width on your divs:
body {
margin:0px;
padding:0px;
}
The actual answer is partially explained in this article, titled: "Using CSS "Display: table-cell" for columns". However, it does not cover the full answer, either. The code, below, includes the full answer and has been tested.
The first part of the answer is to ensure that the entire html and body envelopes are given a baseline...
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
The second part of the answer is to create a full width div that will act as a container for the child divs. As mentioned in the above article, the containing div should be told to "act like an HTML table element" by using the "display: table;" attribute...
div#div_header_container {
background: ' + headerBackgroundColor + ';
border:2px solid ' + 'White' + ';
border-radius:7px;
width: 100%;
display: table;
vertical-align: middle;
}
Third, each of the child divs (in this case there are three) should be given a width that is a percentage of the parent container. And, since the parent container has been told to act like an HTML table element, these child divs should be told to act like table cells using the "display: table-cell;" attribute. They should also be set to vertically align their elements in the middle using the "vertical-align: middle;" attribute, ensuring that each image in each child div will all align along their middles.
div#div_header_left {
width: 20%;
border-radius:7px;
display: table-cell;
vertical-align: middle;
}
div#div_header_center {
width: 60%;
border-radius:7px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
div#div_header_right {
width: 20%;
border-radius:7px;
display: table-cell;
vertical-align: middle;
}
Finally, the images that will be located within each child div that acts like a table cell should be decoupled from the divs, themselves and should be given their appropriate alignments...
img.image_header_left {
float: left;
}
img.image_header_center {
text-align: center;
}
img.image_header_right {
float: right;
}
When applied, the dom's source code will look like:
<body>
<div id="div_header_container">
<div id="div_header_left">
<img class="image_header_left" src="./Logo_Left.png" alt="Header Left Image" />
</div>
<div id="div_header_center">
<img class="image_header_center" src="./Logo_Center.png" alt="Header Center Image" />
</div>
<div id="div_header_right">
<img class="image_header_right" src="./Logo_Right.png" alt="Header Right Image" />
</div>
</div>
</body>
I got the following table, which should center my DIV:
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<div id="someCenteredDiv"></div>
</td>
</tr>
</table>
But the problem is that there is a global stylesheet which defines:
td {
vertical-align: top;
text-align: left; }
It seems like the stylesheet overrides the align and the valign attribute. And when I try to override the style with
text-align: center;
it simply doesn't change anything.
A div is a block element so it can't be centred using text-align: center. You could set it to display: inline-block; or give it a fixed width then use margin: 0 auto;
If your div has fixed width you can use:
margin: 0 auto;
On your div, to center it. Text-align will work only with inline elements, so if your div is not set to 'display: inline' (or inline-block) it won't be centered.
For over-riding a style you can use !important as follows
td
{
text-align: center !important;
}
And to center-align the div element you must use margin:0 auto along with some width assigned.
Please see the example.
I provided height:150px; overflow:auto; to all <td> tags. On less content the height is working fine. For more content vertical scroll bar need to come. But it is not working here for the table cell.
If I use <div> inside the <td> tag with the style property height:inherit; overflow:auto; means scroll is working.
Any solution or reason is there for the overflowed <td> tag?
Please suggest.
Hi now if you change your td display properties than it's work
as like this
td{
display: inline-block;
}
Can be solved by specifying display: block; and float: left; to your TD's style
td { height:150px; overflow:auto; display: block; float: left; }
Demo: http://jsbin.com/ofufuf/1/edit
Table tag does not support overflow property directly.
You have to do this the way you were trying i.e you have to insert a div inside a td and then add overflow in that div.
<table>
<tr>
<td>
<div style="height:100px;overflow:auto;">abc</div>
</td>
</tr>
</table>
I have the following code that produces a background image in a table cell. I would like to put that image in the center of the cell.
<tr>
<td valign="top" width=<%=width%>>
<div id="loading"
style="background-image: url(spinner.gif); height: 16px; width: 16px;">
</div>
</td>
</tr>
I tried align=center but that didn't work and neither did text-align: center.
Centering your background image
You're looking for the background-position property.
You could also coalesce the properties into the shorter background property:
#loading {
background: url(spinner.gif) no-repeat center center;
}
Centering your element within your cell
One other reading of your question is that you want to center your loading animation in your table cell. If that's the case, I would encourage you to use the CSS properties text-align and vertical-align.
td.loading {
text-align: center;
vertical-align: middle;
}
With the following HTML
<td class="loading">
<img src="loader.gif" />
</td>
You can see a working demo online at http://jsbin.com/udehox/
it's worth noting that your DIV is a block element, and doesn't display inline by default. As such, you won't be able to "center" it, since it doesn't permit any space on its left or right.
You can force it to display as an inline element by attaching the display: inline or display: inline-block statements to it.
Try - background-position: center; that should do what you're looking for.
It looks like you are trying to center the div within the cell. You can set margins on the div or use relative positioning. Setting a background-position on the image won't help. The div is set to be 16x16 which I'm betting is the size of the image.
Try this one,
<tr>
<td valign="top" width=<%=width%> align="center" >
<div id="loading" style="background:url(spinner.gif) no-repeat center center; width:16px; height:16px;">
</div>
</td>
</tr>
I have a span that I wish to right adjust so that it's anchored to the edge of an underlying table. I've tried enclosing both elements in a div, but I can't think of a good way of letting the div auto shrink to be of the same size as the table while right-floating the span. Ideas?
I've tried using style="display: inline-block; float: left;" but that doesn't work when the span element is a float: right, it expands the div too much then.
The browser used is IE7 and IE8 in compability mode.
Try:
<div class="wrapper">
<table>
...
</table>
<span class="caption">Here is a caption</span>
</div>
with:
div.wrapper { overflow: hidden; }
span.caption { float: right; }
The overflow part is important.
Technically you could use the <caption> child element of <table> for this but you can't style this with CSS (to the bottom right) on IE6-7.
A solution might depend on what you are using the <span> for. How important is it for the <span> to be floated?
Does this help?
<style type="text/css">
div.wrapper { float: left; text-align: right;}
span.caption { background-color: #9c9;}
</style>
and
<div class="wrapper">
<span class="caption">caption</span>
<table border="2">
<tr><td>column 1</td><td>column 2</td></tr>
</table>
<span class="caption">caption</span>
</div>
Make sure and clear whatever comes after the wrapper.