The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> center heading in display:table-cell
Jack42
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 24 2022, 11:34 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,151
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 24 2022, 01:48 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,105
Joined: 10-August 06
Member No.: 7



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". glare.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jack42
post May 24 2022, 04:12 PM
Post #4





Group: Members
Posts: 8
Joined: 24-May 22
Member No.: 28,363



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th June 2022 - 06:25 AM