I'm trying to build a single row css table with multiple cells that has text that is vertically centered inside the cells. Basically the table behaviour I am trying to mimic with css is this:
<table width="100%" height="54" border="0" bgcolor="red">
<tr>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
</tr>
</table>
So that my code is semantically correct I want to use divs to achieve the same effect.
<div class="job_wrapper">
<div class="info">
<div>01</div>
<div>Campaign 001</div>
<div>DEMO Client</div>
<div>128</div>
<div>449</div>
</div>
</div>
Problem is that the workaround for display:table-cell in IE involved using the float property which overrides the display value to block. hence I lose the vertical centering of text in a table cell.
Is there a workaround to display:table-cell in IE that still gives me the ability to center text vertically in IE?
Cheers
check out the style sheet from http://jogger.pl/404.
they have an interesting workaround in there.
Related
I am writing html for an email and mock-ups of my footer looks like this:
I am facing issues with the vertical alignment of the last row in this mockup, where company logo follows the "Powered by" text. My <td> tag looks like this which is trying to achieve what is in the above mock-up:
<td height="20" style="height: 20px; vertical-align: middle;" align="center" valign="middle">
Powered by
<img valign="middle" src="http://cdn.mcauto-images-production.sendgrid.net/37cafc0cf58b37be/f5b816c0-c7cc-41eb-b01b-21a635204c2b/72x20.png" alt="logo" style="width:71px;height:20px; vertical-align: middle" />
</td>
The code above is not properly middle aligning the text and the logo and producing this for Outlook 2007, although it is working for other mainstream email clients:
You can see that logo and "Powered by" text are not properly aligned in the middle, how can I fix that? Also note that, I cannot use multiple <td> tags inside a <tr> for that purpose because I want horizontal center alignment as well.
My preferred method in these situations is to add a table with no width (equating to width:auto) and utilise table cell vertical alignment which is usually super reliable.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
Powered by
</td>
<td valign="middle" align="right" style="width:76px;">
<img src="https://via.placeholder.com/71x40" alt="logo" style="width:71px;height:40px; vertical-align: middle" />
</td>
</tr>
</table>
So no height set on any table cells, literally letting the image's natural height set the height of it's wrapping cell and then the text cell will match it naturally.
I've also set the image table cell to be slightly wider than the image and aligned the image to the right to give some space between the two pieces of content.
I've got table elements within a table. The parent table has a width of 100% and the child table has a width of 300px. I want the child to be centered, so I tried with css to set it with text-align: center;. (https://jsfiddle.net/wrzo7LLb/1/)
<table class="body">
<tr>
<td class="align center"> <!-- CSS text-align: center; -->
<table class="wrapper">
<tr>
<td>
some text
</td>
</tr>
</table>
</td>
</tr>
</table>
But that doesn't work. And then I tried it with align="center" and that did work. (https://jsfiddle.net/wrzo7LLb/)
<table class="body">
<tr>
<td align="center"> <!-- align="center" -->
<table class="wrapper">
<tr>
<td>
some text
</td>
</tr>
</table>
</td>
</tr>
</table>
Could someone explain to me why align="center" works, but text-align: center; doesn't?
I know I can set margin: 0 auto;, but that doesn't explain why align="center" works and the other doesn't.
Semantically (and technically) speaking, text-align should only be used to align inline level elements, of which a table is not.
The align property on a table doesn't refer to text but to
align
This enumerated attribute indicates how the table must be aligned inside the containing document.
As per the table docs above, align has been deprecated, and it is suggested that you do indeed use margin:0 auto; to "center" a table element
Usage Note
Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. Set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute.
text-align:center only works for inline elements and obviously table is a table element.
set and try again
table table {
display:inline;
}
I want to align a table data at the top. Example.
data-- I want to align this at top
text.... - this contains a lot of text that makes the first table data at the center
Like this:
klasdjlkasjdlsakjdlk
kldjaslkdjsadkjasldj
dlasjidlaskdjlaksjdl
asdasd ajsdlkasjdlaskjdlkas
laksjdlaksdjsalkdjak
adlksjdlasjdkasjdlka
I want it to be like this.
asdasd klasdjlkasjdlsakjdlk
kldjaslkdjsadkjasldj
dlasjidlaskdjlaksjdl
ajsdlkasjdlaskjdlkas
laksjdlaksdjsalkdjak
adlksjdlasjdkasjdlka
Any ideas?
Define in your css td vertical-align :top and text-align :left
td{vertical-align:top;text-align:left;}
without css
<td valign="top" align="left"> // here your data </td>
Is this just a standard HTML table?
<td valign="top">text</td>
Here is how to do it without CSS:
<table width="100" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
asdasd
</td>
<td>
klasdjlkasjdlsakjdlk
kldjaslkdjsadkjasldj
dlasjidlaskdjlaksjdl
ajsdlkasjdlaskjdlkas
laksjdlaksdjsalkdjak
adlksjdlasjdkasjdlka
</td>
</tr>
</table>
It is best to do this with CSS, rather than inline as you'll have more flexibility and your code will be leaner and easier to read.
If you only want to do it for particular cells, then consider using classes.
For inline (not recommended), use the following:
<td valign="top">...</td>
To use css, use the following in your stylesheet:
td { vertical-align: top; }
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.
When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,
<div align="center" style="width:510px;height:510px;margin-left:300px">
<table style="width:510px;height:510px">
<tr>
<td align="center" valign="middle">
<img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/>
</td>
</tr>
</table>
</div>
But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?
You shouldn't be using <div align="center"> either really, its been deprecated:
http://reference.sitepoint.com/html/div/align
This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.
I'm not certain on the best way of vertically aligning div's (although you may find this article worth reading), but I know that you are right, you shouldn't use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.
This will help you i think so:
just give #to div. and then style it in CSS as follow:
position: absolute;
left: 50%;
right: 50%;
width: _px;
height: _px;
margin: half of the width, half of the height;
Try this. May help you.
<div style="width:510px;height:510px;border:1px solid;margin:auto;">
<table style="width:100%; height:100%;">
<tr>
<td align="center">
<img id="main" src="wp1.JPG" style="max-width:300px;max-height:300px;"/>
</td>
</tr>
</table>
</div>