Question

我想知道如何垂直对齐一个标签的图像，以便它位于页面的正中心（输入标签位于我的最后一个代码块中，在第26行左右）。这是我的HTML（很抱歉，如果所有这些代码看起来很可怕，我对这一切都不熟悉）：

<?php
    require ('login/steamauth.php');  
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SteamStakes.com</title>
    <meta name="description" content="">
    <meta name="keyword" content="">
    <meta name="robots" content="index,follow">

    <link rel="stylesheet" type="text/css" href="css/animate.css"> <!--ignore this-->
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/home.js"></script>
</head>
<body>
    <div id="bg"></div>
    <div id="welcome">
        <?php
            if(!isset($_SESSION['steamid'])) {

                steamlogin(); //login button

            }  else {

                include ('steamauth/userInfo.php'); //To access the $steamprofile array
                //Protected content

                logoutbutton(); //Logout Button
            }     
        ?>
    </div>
</body>

我的CSS：

html { 
    height:100%;
}

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -100;
}

body {
    width: 100%;
    height: 100%;
}

div#welcome {
    width: 100%;
    height: 100%;
}

form {
    width: 100%;
    height: 100%;
}

input#steam {
    text-align: center;
    display: block;
    margin: auto;
    vertical-align: middle;
    transform: translateY(-50%);
}

我的JavaScript：

$(document).ready(function() {
    $('#bg').animate({opacity: 0}, 0).css({'background-image': 'url(images/bg.jpg)'}).animate({opacity: 1}, 1500);
    $('input#steam').animate({opacity: 0}, 0).animate({opacity: 1}, 1500);
});

以防万一，这是我的steamauth.php（它来自SimItH197的SteamAuthentication库。我编辑了一下，以便它符合我的需要。它位于here）：

<?php
ob_start();
session_start();
require ('openid.php');

function logoutbutton() {
    echo "<form action=\"login/logout.php\" method=\"post\"><input value=\"Logout\" type=\"submit\" /></form>"; //logout button
}

function steamlogin()
{
    try {
        require("settings.php");
        $openid = new LightOpenID($steamauth['domainname']);

        $button['small'] = "small";
        $button['large_no'] = "large_noborder";
        $button['large'] = "large_border";
        $button = $button[$steamauth['buttonstyle']];

        if(!$openid->mode) {
            if(isset($_GET['login'])) {
                $openid->identity = 'http://steamcommunity.com/openid';
                header('Location: ' . $openid->authUrl());
            }
            echo "<form action=\"?login\" method=\"post\"> <input type=\"image\" id=\"steam\" src=\"http://cdn.steamcommunity.com/public/images/signinthroughsteam/sits_".$button.".png\"></form>";
        }
        elseif($openid->mode == 'cancel') {
            echo 'User has canceled authentication!';
        } else {
            if($openid->validate()) { 
                $id = $openid->identity;
                $ptn = "/^http:\/\/steamcommunity\.com\/openid\/id\/(7[0-9]{15,25}+)$/";
                preg_match($ptn, $id, $matches);

                session_start();
                $_SESSION['steamid'] = $matches[1]; 
                if (isset($steamauth['loginpage'])) {
                    header('Location: '.$steamauth['loginpage']);
                }
            } else {
                echo "User is not logged in.\n";
            }

        }
    } catch(ErrorException $e) {
        echo $e->getMessage();
    }
}
?>

提前感谢任何阅读此内容并提供解决方案和/或反馈的人。我非常感激。

Answer 1

我明白了。事实证明我必须稍微改变一下CSS：

input#steam {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -21.5px;
    margin-left: -57px;
}

这样做是改变x = 0和y = 0坐标以匹配页面的绝对中心。然后，我必须设置-21.5px和-57px的边距（分别是图像的高度和宽度的一半），以使图像的中心与页面的中心匹配。

有关此主题的更多信息here。

Answer 2

我做了其他方式 - 通过添加一个参数

编辑函数steamLogin（）

function steamlogin($hola = '')

并在steamAuth文件中编辑了我需要的所有内容。

垂直对齐输入内部的图像

2 个答案: