参见英文答案 >
How do I center a <div>? 4个
这是注册框:
这是注册框:
http://technicaldebt.co.uk/fyp/register.php
我试图让框在网页中间居中. CSS附在下面.任何帮助将不胜感激.
- /*********************************************************************************/
- /* Basic */
- /*********************************************************************************/
- *
- {
- -webkit-Box-sizing: border-Box;
- -moz-Box-sizing: border-Box;
- Box-sizing: border-Box;
- }
- body
- {
- background: #1e1e1e url(images/bg04.jpg) repeat;
- font-family: 'Open Sans',sans-serif;
- font-size: 11pt;
- color: #7f7f7f;
- }
- form
- {
- }
- form input,form select,form textarea
- {
- -webkit-appearance: none;
- }
- br.clear
- {
- clear: both;
- }
- p,ul,ol,dl,table
- {
- margin-bottom: 1em;
- }
- p
- {
- line-height: 1.7em;
- }
- a
- {
- color: #779c5b;
- }
- a:hover
- {
- text-decoration: none;
- }
- section,article
- {
- margin-bottom: 3em;
- }
- section > :last-child,article > :last-child
- {
- margin-bottom: 0;
- }
- section:last-child,article:last-child
- {
- margin-bottom: 0;
- }
- .image
- {
- display: inline-block;
- }
- .image img
- {
- display: block;
- width: 100%;
- }
- .image-full
- {
- display: block;
- width: 100%;
- }
- .image-left
- {
- float: left;
- margin: 0 2em 0 1em;
- }
- .image-border img
- {
- border-radius: 5px;
- }
- ul.style1
- {
- }
- ul.style1 li
- {
- padding: 0.80em 0 0.75em 0;
- border-top: 1px solid #e0e0e0;
- }
- ul.style1 a
- {
- text-decoration: underline;
- color: #779c5b;
- }
- ul.style1 a:hover
- {
- text-decoration: none;
- }
- ul.style1 .image-left
- {
- margin-top: 0.50em;
- margin-right: 1.50em;
- margin-left: 0 !important;
- }
- ul.style1 .date
- {
- display: block;
- margin: 0;
- padding: 1em 0 0 0;
- line-height: 0;
- color: #047ab7;
- }
- ul.style1 .first
- {
- border-top: none;
- }
- ul.style2
- {
- }
- ul.style2 li
- {
- overflow: hidden;
- padding: 1.75em 0 1.75em 0;
- border-top: 1px solid #e0e0e0;
- }
- ul.style2 p
- {
- margin: 0;
- }
- ul.style2 h3 {
- padding: 0 0 0.50em 0;
- font-size: 1.00em;
- }
- ul.style2 .image-left
- {
- margin-left: 0;
- }
- ul.style2 .first
- {
- border-top: none;
- }
- ol.style1
- {
- margin-left: 3em;
- }
- ol.style1 li
- {
- padding: 0.35em 0;
- list-style: decimal;
- }
- .button
- {
- display: inline-block;
- margin-top: 1em;
- padding: 0.70em 1.5em;
- border-radius: 5px;
- background: #779c5b;
- line-height: 1;
- text-align: center;
- text-decoration: none;
- color: #FFFFFF;
- transition: background-color .25s ease-in-out;
- -moz-transition: background-color .25s ease-in-out;
- -webkit-transition: background-color .25s ease-in-out;
- }
- .button:hover
- {
- background: #96b77c;
- }
- .button-style1
- {
- background: #222222;
- }
- .button-style1:hover
- {
- background: #2d2d2d;
- }
- .button-style2
- {
- margin-top: 0.50em;
- padding: 1.75em 3.00em;
- Box-shadow: 5px 0 5px -5px rgba(0,0.4),0 6px 5px -5px rgba(0,-5px 0 5px -5px rgba(0,0.4);
- line-height: 0.25em;
- }
- .button-style2:hover
- {
- background: #96b77c;
- }
- /* Assign these to ARTICLE tags */
- .Box
- {
- padding: 2.50em 2.50em;
- background: #FFFFFF;
- border: 1px solid #e0e0e0;
- border-radius: 5px;
- }
- .Box h2
- {
- padding: 0 0 0.40em 0;
- letter-spacing: -0.03em;
- font-size: 1.60em;
- color: #0f0f0f;
- }
- .Box .subtitle
- {
- padding: 0 0 0.30em 0;
- font-size: 1.10em;
- color: #5f6b8b;
- }
- .Box-post
- {
- }
- .Box-featured-post
- {
- }
- /* Assign these to SECTION tags */
- .Box-news
- {
- }
- .Box-tweets
- {
- }
- .Box-contact
- {
- }
- /*********************************************************************************/
- /* Wrappers */
- /*********************************************************************************/
- #wrapper
- {
- overflow: hidden;
- background: url(images/bg01.jpg) repeat;
- }
- #wrapper-gradient
- {
- }
- #header-wrapper
- {
- overflow: hidden;
- background: url(images/gradient.svg);
- background: -moz-linear-gradient(
- center bottom,rgba(0,0) 5%,0.5) 100%
- );
- background: -webkit-gradient(
- linear,left bottom,left top,color-stop(0.0,0.0)),color-stop(1.0,0.5))
- );
- }
- #banner-wrapper
- {
- overflow: hidden;
- }
- #feature-wrapper
- {
- overflow: hidden;
- padding: 3em 0em;
- background: #5f6b8b url(images/shadow02.png) no-repeat center top;
- Box-shadow: 0px 10px 5px rgba(0,.3),0px -1px 25px rgba(0,.3);
- color: #dfe2e8;
- }
- #main-wrapper
- {
- overflow: hidden;
- padding: 3em 0em 4em 0em;
- background: #f3f3f3 url(images/bg03.jpg) repeat;
- Box-shadow: 0px 10px 5px rgba(0,.3);
- }
- #footer-wrapper
- {
- }
- #copyright-wrapper
- {
- background: url(images/gradient.svg);
- background:
- -moz-linear-gradient(
- center bottom,0.5) 70%
- );
- background: -webkit-gradient(
- linear,color-stop(0.70,0.5))
- );
- }
- /*********************************************************************************/
- /* Feature */
- /*********************************************************************************/
- #feature-content
- {
- }
- #feature-content h2
- {
- height: 3.50em;
- margin: 0 0 1em 0;
- padding: 0 0 0 3.50em;
- background: url(images/arrow01.png) no-repeat 0.75em 50%;
- border-bottom: 1px solid #949db3;
- letter-spacing: -0.02em;
- font-size: 1.50em;
- color: #FFFFFF;
- }
- #feature-content span
- {
- display: inline-block;
- height: 3.50em;
- padding: 0 0 0 1em;
- border-left: 1px solid #949db3;
- line-height: 3.5em;
- }
- /*********************************************************************************/
- /* Banner */
- /*********************************************************************************/
- #banner
- {
- overflow: hidden;
- }
- #banner h2
- {
- display: inline-block;
- font-weight: 700;
- color: #FFFFFF;
- }
- #banner .subtitle
- {
- font-weight: 300;
- color: #ababab;
- }
- /*********************************************************************************/
- /* Content */
- /*********************************************************************************/
- #content
- {
- }
- #content article
- {
- }
- #content .image-left
- {
- margin-left: 0;
- }
- /*********************************************************************************/
- /* Sidebar */
- /*********************************************************************************/
- #sidebar
- {
- }
- /*********************************************************************************/
- /* Two Column */
- /*********************************************************************************/
- #two-column
- {
- }
- #two-column .tBox
- {
- }
- #two-column .tBox .image-full
- {
- padding-bottom: 2em;
- }
- /*
- Registration/Login Form by html-form-guide.com
- You can customize all the aspects of the form in this style sheet
- */
- #fg_membersite fieldset
- {
- width: 230px;
- padding:20px;
- border:1px solid #ccc;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- -khtml-border-radius: 10px;
- border-radius: 10px;
- }
解决方法
以边距为中心的div:0 auto;喜欢建议div必须包含有效宽度.
如果你添加
- #register{
- //...
- width: 300px;
- margin: 0 auto;
- }
这将使div在中心水平居中.您还可以在父级中使用text-align:center,并在div格式中使用display:inline-block.如:
- #fg_membersite{
- text-align:center;
- }
- #register{
- display:inline-block;
- }
如果你想在垂直中心,我建议你使用display:table(在aprent div上)和display:table-cell(在包装div中)和vertical-align:middle选项,或者可能是一个位置:absolute with负利润,这是你的选择.
干杯.