Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ center heading in display:table-cell
Posted by: Jack42 May 24 2022, 10:23 AM
I am trying to center a h2 header in a form using display:table. I have everything lining up correctly except the headers. I created a jsfiddle to show the issue:
https://jsfiddle.net/rtkd95af/
I need Applicant Information centered above the label and input. What did I do wrong?
Posted by: pandy May 24 2022, 11:34 AM
You haven't done anything to center it. Add 'text-align: center' to the form.pdfform rule.
I think display: table-row is an odd choice for the heading. I'd use table-cell. Neither do I understand why you need to display everything as table elements in the first place, but I guess you have a purpose with that.
Posted by: Christian J May 24 2022, 01:48 PM
QUOTE(pandy @ May 24 2022, 06:34 PM) 
I think display: table-row is an odd choice for the heading. I'd use table-cell.
In theory "display: table-caption" seems logical to me, since it should make the H2 behave like a table's CAPTION element. But in practice it doesn't seem to change anything in my browsers, so you still need "text-align: center".
Posted by: Jack42 May 24 2022, 04:12 PM
QUOTE(pandy @ May 24 2022, 11:34 AM)
You haven't done anything to center it. Add 'text-align: center' to the form.pdfform rule.
I think display: table-row is an odd choice for the heading. I'd use table-cell. Neither do I understand why you need to display everything as table elements in the first place, but I guess you have a purpose with that.
Thank you for the fix. I overlooked the simple thing.
I have to get the user to enter data into a bunch of fields and this is the only I can get the everything to line up.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)