使用HTML CSS更改DIV框的居中属性
我有一个带有CSS属性的HTML页面。我需要更改HTML页面中框的居中位置。我尝试了CSS规则上的一些转换参数。但在某些情况下,这在Mozilla浏览器上不起作用。我还尝试了在Mozilla的CSS代码中使用ZOOM属性。我也面临同样的问题。有什么想法吗 网页的HTML代码 在这里,我想更改登录框CSS的中心位置?我尝试了transform:translate(-50%,-50%)。这是工作在铬。但在某些情况下,这在firefox浏览器上不起作用使用HTML CSS更改DIV框的居中属性,html,css,Html,Css,我有一个带有CSS属性的HTML页面。我需要更改HTML页面中框的居中位置。我尝试了CSS规则上的一些转换参数。但在某些情况下,这在Mozilla浏览器上不起作用。我还尝试了在Mozilla的CSS代码中使用ZOOM属性。我也面临同样的问题。有什么想法吗 网页的HTML代码 在这里,我想更改登录框CSS的中心位置?我尝试了transform:translate(-50%,-50%)。这是工作在铬。但在某些情况下,这在firefox浏览器上不起作用 所以我的疑问是,如何只为Firefox浏览器编写
所以我的疑问是,如何只为Firefox浏览器编写CSS属性?有什么建议吗 代码几乎没有变化,将
接触表单框
对准中心
并移除最小宽度:1000px在x轴上创建滚动条的code>,请选中此项
要将文本对齐到左侧
,以便您已声明文本对齐:居中
,请将其更改为文本对齐:左侧
,或将其删除。添加:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
要居中父元素的元素。居中什么?div的内容还是div本身?
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.login {
background: url(bg.jpg);
}
h2 {
font-size: 30px;
line-height:38px;
font-weight:normal;
}
.loginbox {
background: #FBFCFD;
padding: 10px;
width: 490px;
/*margin: 4% auto 0 auto;
position: relative; */
border: 1px solid;
position: fixed;
top: 50%;
left: 50%;
//comment transform: translate(-50%, -50%);
}
.loginboxinner {
background: #FBFCFD;
padding: 5px;
position: relative;
border: 1px solid #FBFCFD;
-moz-box-shadow: inset 0 1px 0 #FBFCFD;
-webkit-box-shadow: inset 0 1px 0 #FBFCFD;
box-shadow: inset 0 1px 0 #FBFCFD;
}
.loginheader {
height: 20px;
}
.loginform {
margin: 4px auto;
text-align:center;
}
.loginbox h1 {
font-size: 30px;
letter-spacing: 1px;
color: #555;
font-weight: normal;
padding-top: 10px;
}
.loginbox p {
margin: 7px 0 5px 0;
}
.loginbox label {
display: block;
color: #666;
letter-spacing: 1px;
font-size: 18px;
}
.loginbox input.mini {
width:195px;
}
.loginbox input {
padding: 12px 10px;
color: #0b0a0a;
font-family: Arial, Helvetica, sans-serif;
margin-top: 8px;
font-size: 15px;
border: 1px solid #ccc;
width: 420px;
outline: none;
}
.loginbox button {
background: #F29A17;
padding: 10px 20px;
font-size: 18px;
border: 1px solid #E68E0A;
letter-spacing: 1px;
color: #fff;
width: 440px;
line-height:30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-moz-box-shadow: 1px 1px 3px #1D3871;
-webkit-box-shadow: 1px 1px 3px #1D3871;
box-shadow: 1px 1px 3px #1D3871;
cursor: pointer;
}
.radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.radius1 {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.title {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color:#8E989E;
line-height:28px;
font-weight:normal;
text-align:center;
font-size:16px;
margin-bottom: 20px;
}
.form-main-title{margin-top: 20px; }
@media screen and (max-width: 430px) {
body { font-size: 11px; }
button, input, select, textarea { font-size: 11px; }
.loginbox { width: auto; margin: 10px; }
.loginbox input { width: 95%; }
.loginbox button { width: 100%; }
}
#facebook-Bar {
background:#18191A;
border-bottom: 1px solid #121314;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.52);
min-width: 1000px;
width: 100%;
z-index: 1000;
}
#facebook-Frame {
margin-left:auto;
margin-right:auto;
max-width:1000px;
height:70px;
display:block;
}
/*-------LOGO-----------*/
#logo {
float: left;
height: 70px;
position: relative;
width: 360px;
}
#logo a {
position: absolute;
top: 20px;
font-size:23px; font-weight:bold; color:#FFF;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
}