自定义Wordpress登录与中心CSS对齐

Question

我有一个简单的CSS问题，即将内容与中心对齐，基本上我在左侧有一个徽标，在右侧有登录输入。这是我的function.php代码

function custom_login_css() 
{
    echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" >';
}
add_action('login_head', 'custom_login_css');

这是我的css代码，在这段代码中，我使用伪代码生成带有徽标的div和带内容的div。这些是#login之前和之后。正如你所看到的，我没能把它们放在一起。这是我唯一的问题，默认情况下#login div设置为居中，但我添加了一个div，所以它有点混乱。

body.login {
    background: #525763;
    background-repeat: no-repeat;
    background-size: cover;
    padding: auto !important;
    margin: 0px auto 0px auto !important;
    overflow: hidden;
}
#login {
    border: 1px solid #000 !important;
    box-shadow: none;
    background-image: url('../login/loginbg.png');
    background-size: 350px 500px;
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0px auto 0px auto !important;
    height: 100%;
    overflow: hidden;
}
.login h1 a {
    background-image: none;
    /*background-size: 212px 219px;
    width: 212px;
    height: 219px;*/
}
.login form {
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
}
form#loginform {
    top: 10;
    text-align: center !important;
}
#user_login, #user_pass {
    background: #606674;
}
input#wp-submit {
    margin-top: 20px;
    width: 300px !important;
    background: yellow;
    color: #606674;
    border: 0px;
}
#login:before {
    content: " ";
    display: block;
    background-image: url('../login/logo1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 200px;
    width: 207px;
    position: absolute;
    left: 250px;
    top: 100px
}
#login:after {
    content: "Here at The Design Cereal, we aspire to share real and valuable knowledge to any individual-both new and experienced-who's looking to grow creatively in tech world especially in the advent of creative tools such as Adobe Photoshop and Illustrator. Our easy-to-understand method of writing articles hopes to simplify daunting technical requirements a designer needs to propel himself forward in his creative venture.";
    display: block;
    color: #fff;
    width: 300px;
    position: absolute;
    left: 200px;
    top: 340px
}

我还会包含一张我想到的图像。

Answer 1

尝试将输入字段和徽标设置为显示块，然后应用您需要的任何CSS来居中它们。