html – CSS中心文本框[复制]
发布时间:2020-12-14 16:35:54 所属栏目:资源 来源:网络整理
导读:参见英文答案 How do I center a div? 4个 这是注册框: http://technicaldebt.co.uk/fyp/register.php 我试图让框在网页中间居中. CSS附在下面.任何帮助将不胜感激. /*********************************************************************************//
参见英文答案 >
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负利润,这是你的选择. 干杯. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |