Question

我有一个带CSS属性的HTML页面。我需要在HTML页面中更改Box的居中。我尝试了CSS规则的一些变换参数。但有些情况下这不适用于Mozilla浏览器。我也尝试使用Mozilla的CSS代码中的ZOOM属性。我遇到了同样的问题。任何的想法？

网页的HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SAMPLE Page Design </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body class="login">
<!-- header starts here -->
<div id="facebook-Bar">
  <div id="facebook-Frame">
    <div id="logo"> <a href="#">Sample script page</a> </div>
      </div>
</div>
<!-- header ends here -->

<div class="loginbox radius">
<h2 class="form-main-title" style="color:#141823; text-align:center;">Welcome to sample page</h2>
    <div class="loginboxinner radius">
        <div class="loginheader">
            <h4 class="title">Connect with friends</h4>
        </div><!--loginheader-->
        <div class="loginform">

            <form id="login" action="" method="post">
                </br></br>
                <p>
                    User Name :  <input type="text" id="username" name="username" placeholder="Enter your User Name" value="" class="radius mini" />
                    <p>
                        </br>
                    </p>
                </p>
                <p>
                    <button id="submit" class="radius title" name="client_login">Login </button>
                </p>
            </form>
        </div><!--loginform-->
    </div><!--loginboxinner-->
</div><!--loginbox-->

和我写的HTML页面的CSS代码：

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;
}

在这里，我想更改登录框CSS的居中位置？我尝试使用transform：translate（-50％， - 50％）; 。这是在chrome中工作。但有些情况下这不适用于firefox浏览器。

所以我的疑问是如何只为Firefox浏览器编写CSS属性？有什么建议？

Answer 1

添加：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

指向您想要居中的元素。

Answer 2

代码中的变化很少，要将contact form box与center对齐并删除min-width:1000px;，scrollbar x-axis，请检查left }}

要将文字与text-align:center对齐，因此您已经宣布text-align:left，因此请将其更改为log4j.appender.file=org.apache.log4j.DailyRollingFileAppender log4j.appender.file.Threshold=TRACE log4j.appender.file.Append=true log4j.appender.file.File=./logs/applog.log log4j.appender.file.DatePattern='.'yyyy-MM-dd log4j.appender.file.layout=org.apache.log4j.PatternLayout log4j.appender.file.layout.ConversionPattern=%d{yy/MM/dd HH:mm:ss} %p %c{1}: %m%n或删除该文字。

使用HTML CSS更改DIV Box的居中属性

网页的HTML代码

2 个答案: