StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCenter form with display:table-cell
primarykey
Id
18356114
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-08-21T11:24:32.520
FavoriteCount
0
LastActivityDate
2013-08-21T11:34:14.107
LastEditDate
LastEditorUserId
0
OwnerUserId
2538014
ParentId
0
PostTypeId
1
Score
0
ViewCount
917
LastEditorDisplayName
text
Body
<p>I have a submit button inside a form-tag. This form tag has some css-propertys:</p> <ol> <li>On Desktop it has a fixed with</li> <li>On mobile devices it has a percentage-width</li> </ol> <p>The problem is, that the submit button inside the form has width:auto; and margin:0 auto; so that it´s centered inside the form-tag. But webkit (mobile safari and safari) doesn´t understand that. In those browser the submit button is not centered but on the left side. So I wrote a jquery script which calculates the width and sets it to the submit button (instead of width:auto). That was the fix.</p> <p>I made a research and now I know, that I could use display:table-cell; in the form tag, which will center the content (the submit button) BUT: that means that I can not center the form itself. So my question is, how to modify the code below so that the form is centered inside the wrapper and the submit button inside the form?</p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> #wrap{ width:1000px; background:red; } form { height:100px; width:500px; margin:0 auto; display:table-cell; border:1px solid black; text-align:center; vertical-align:middle; -webkit-box-align: center; } form input[type=submit], form input[type="button"], form input[type="reset"], form button { width:auto; min-width:40%; height:32px; margin:20px auto; line-height:14px; padding:9px 15px; background-color:#617798; border:0; font-size:14px; color:#FFFFFF; text-align:center; vertical-align:middle; -webkit-box-align: center; /* Border-Radius */ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; -o-border-radius:5px; cursor:pointer; display:inline; /* iPad-Button-Reset:*/ -webkit-appearance:none; } </style> </head> <body> <div id="wrap"> <h1>Titel Blafasel</h1> <form> <input type="submit" value="Submit" /> </form> </div> </body> </html> </code></pre>
Tags
<html><css><css-tables>
Title
Center form with display:table-cell
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USjulesdude
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.