Question

我是网络开发的新手，我正在尝试完成google主页的盗版副本，但由于某些原因，我正在处理的搜索栏未能与该中心对齐。

我已经浏览了页面底部的解决方案（here），并在此处搜索了解决方案，但似乎没有任何效果。

这是指向jsfiddle of the files的链接以及下面代码的副本。

HTML：

<!DOCTYPE>
<html>
<head>
    <title>Google</title>
    <link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="logo">
        <img src="images/googlelogo.png" alt="Google Logo">
    </div>
    <form>
        <input type="text">
    </form>
</body>
</html>

CSS：

body {
    background-color: #fff;
}
.logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
form input {
    border: solid 1px rgba(0, 0, 0, .2);
    height: 30px;
    width: 500px;
    position: absolute;
    top: 53%;
    left: 50%:
    transform: translate(-50%, -50%);
}

Answer 1

你的css部分有问题。你添加了一个冒号而不是分号。除此之外，一切看起来都不错更改此

$("#debt_list tr")

form input {
    border: solid 1px rgba(0, 0, 0, .2);
    height: 30px;
    width: 500px;
    position: absolute;
    top: 53%;
    left: 50%:
    transform: translate(-50%, -50%);
}

现在可行了

Answer 2

无需使用position:absolute只需使用text align。

body {
	background-color: #fff;
}
.logo {
	margin-top: 50px;
    /* width: 125px; */
    /* top: 40%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    text-align: center;
}
form {
    width: 100%;
    text-align: center;
}
form input {
	border: solid 1px rgba(0, 0, 0, .2);
    height: 30px;
    width: 500px;
    /* position: absolute; */
    /* top: 53%; */
    /*left: 50%: transform: translate(-50%, -50%);*/
}

<!DOCTYPE>
<title>Google</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
<body>
    <div class="logo">
        <img src="https://www.google.com.bd/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
    </div>
    <form>
        <input type="text">
    </form>
</body>

在CSS

2 个答案: