View Full Version : how to make the text vertical-align center in <td> < table>

23 Feb 2011, 11:17 PM
i put a table in panel ,but the text can't be vertical-align center?why
i find the code 'style="vertical-align:middle' isn't useful!!!1can you help me?

htmlvaule=' <div><table height="82" border="1" align="center" style="vertical-align:middle;text-align:center; > <tr> <td width="83" height="23" ><p>time</p></td> <td width="89" ><p>name</p></td> <td width="152" ><p>address</p></td> </tr> </table></div>

var mymappanel2012A = new Ext.Panel({


html: htmlvaule,
autoScroll: true


23 Feb 2011, 11:37 PM
vertical-align only affect alignment of text in a fixed height container.

Do you want the table aligned in the center or do you want the table stretched to fit the panel and have the text in the cells centered?

24 Feb 2011, 12:54 AM
i want to have the text in the cells centered in vertical ?
how to do?

24 Feb 2011, 12:59 AM
Why are you setting vertical-align on the table when you want it on the td?

ps. I would use css rules instead of inline styles.

24 Feb 2011, 2:03 AM
if i setting vertical-align on td ,it does't work either..
can you show me the CSS you write?thank you

24 Feb 2011, 2:12 AM
What exactly is the problem? Your text is perfectly centered in the cells!

Or did you want the table centered inside the panel? In that case you should do something completely different:

var htmlvalue = '<table height="82" border="1" style="vertical-align:middle;text-align:center;"><tr><td width="83" height="23"><p>time</p></td><td width="89"><p>name</p></td><td width="152"><p>address</p></td></tr></table>';

var mymappanel2012A = new Ext.Panel({
height: 200,
layout: 'vbox',
layoutConfig: {
pack: 'center',
align: 'center'
items: {
xtype: 'box',
autoEl: {cn: htmlvalue}