如何让此表单元素位于此页面的中心？ [英] How do I get this form element to sit at the center of this page?

问题描述

HTML code

HTML code

<form method="post" id= "form" action>
        <input type="text" id="email" name="email" value class="defaultText">
        <input type="submit" value="submit" id="submitButton">
</form>

CSS代码



* {

保证金：0 ;

p

CSS code

*{
margin:0;
p

<pre lang="CSS"><pre lang="c++"><pre lang="CSS">

添加：0;

}





/ * -------------------------

一般样式

-------------------------- * /





html {

背景：＃b0b0b0;

}



身体{

背景：#ffff68f无重复中心;

字体：14px / 1.3'Segoe UI'，Arial，sans-serif;

}





表格{

背景：＃181819;

显示：块;

身高：31px;

填充：10px;

职位：相对;

宽度：323px;

-webkit-border-radius：3px;
-moz-border-radius：3px;

border-radius：3px;

}



#form {

颜色：rgb（238,238,238）;

身高：31px;

职位：相对;

宽度：323px;

perspective-origin：171.5px 25.5px;

transform-origin：171.5px 25.5px;

背景：rgba（24,24,25）无重复滚动0％0％/ auto padding-box border-box;

border：0px none rgb（238,238,238） ）;

border-radius：3px 3px 3px 3px;

字体：正常正常正常15px /正常校准Arial sans-serif;

保证金：0px 0px 0px -7px;

填充：10px;

}



#submitButton {

background：url（submit_form.png）no-repeat right top;

border：none;

cursor：pointer;

身高：31px;

左：236px;

行高：31px;

职位：绝对;

text-indent：-99999px;

text-transform：uppercase;

top：10px;

宽度：96px;

}



#email {

background：url（submit_form.png）no-repeat;

border：none;

color： ＃888888;

身高：31px;

左：10px;

行高：31px;

填充-left：8px;

text-shadow：1px 1px 0＃000000;

top：10px;

宽度：215px;

outline：none;

}

adding:0;
}


/*-------------------------
General Styles
--------------------------*/


html{
background: #b0b0b0;
}

body {
background: #fff68f no-repeat center center;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
}


form {
background: #181819;
display: block;
height: 31px;
padding: 10px;
position: relative;
width: 323px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#form {
color: rgb(238, 238, 238);
height: 31px;
position: relative;
width: 323px;
perspective-origin: 171.5px 25.5px;
transform-origin: 171.5px 25.5px;
background: rgba(24, 24, 25) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(238, 238, 238);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 15px/normal calibri Arial sans-serif;
margin: 0px 0px 0px -7px;
padding: 10px;
}

#submitButton {
background: url(submit_form.png) no-repeat right top;
border: none;
cursor: pointer;
height: 31px;
left: 236px;
line-height: 31px;
position: absolute;
text-indent: -99999px;
text-transform: uppercase;
top: 10px;
width: 96px;
}

#email {
background: url(submit_form.png) no-repeat;
border: none;
color: #888888;
height: 31px;
left: 10px;
line-height: 31px;
padding-left: 8px;
text-shadow: 1px 1px 0 #000000;
top: 10px;
width: 215px;
outline: none;
}

推荐答案

试试这个

Try this

form {
margin: 0 auto;
width:250px;
}

对于表单，请使用以下css

For the form, use the following css

form {
  display: inline-block;
  text-align: center;
}

请阅读这些页面



http://designshack.net/articles/css/how-to-center-anything-with -css / [ ^ ]



https://css-tricks.com/quick-css-trick-如何在一个中心 - 一个完全在中心的对象/ [ ^ ]



https://css-tricks.com/centering-css-complete-guide/ [ ^ ]



https://css-tricks.com/centering-css-完整指南/ [ ^ ]



或谷歌如何用css定位元素

please read these pages

http://designshack.net/articles/css/how-to-center-anything-with-css/[^]

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/[^]

https://css-tricks.com/centering-css-complete-guide/[^]

https://css-tricks.com/centering-css-complete-guide/[^]

or google it " how to centering elements with css "

这篇关于如何让此表单元素位于此页面的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！