center heading in display:table-cell |
center heading in display:table-cell |
Jack42 |
May 24 2022, 10:23 AM
Post
#1
|
Group: Members Posts: 8 Joined: 24-May 22 Member No.: 28,363 |
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? |
pandy |
May 24 2022, 11:34 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. |
Christian J |
May 24 2022, 01:48 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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". |
Jack42 |
May 24 2022, 04:12 PM
Post
#4
|
Group: Members Posts: 8 Joined: 24-May 22 Member No.: 28,363 |
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. |
Lo-Fi Version | Time is now: 26th April 2024 - 09:16 AM |