對齊在CSS中的文本輸入

-1

我是新來的網頁開發，並試圖完成谷歌主頁的盜版副本，但由於某種原因，我正在工作的搜索欄不會對齊到中心。對齊在CSS中的文本輸入

我已經通過頁面底部的解決方案（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%); 
}

來源

2016-10-15 Laurens

與你的CSS部分你有問題。您已經添加了從一切結腸代替semicolon.Apart對我來說很好更改此

form input { 
 
    border: solid 1px rgba(0, 0, 0, .2); 
 
    height: 30px; 
 
    width: 500px; 
 
    position: absolute; 
 
    top: 53%; 
 
    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%); 
 
}

現在將工作

來源

2016-10-15 05:57:08 Geeky

哦老天，這就是了。非常感謝，我花了很長時間尋找這個問題。 – Laurens

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

body { 
 
\t background-color: #fff; 
 
} 
 
.logo { 
 
\t margin-top: 50px; 
 
    /* width: 125px; */ 
 
    /* top: 40%; */ 
 
    /* left: 50%; */ 
 
    /* transform: translate(-50%, -50%); */ 
 
    text-align: center; 
 
} 
 
form { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
form input { 
 
\t 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>

來源

2016-10-15 06:01:28 AHJeebon

對齊在CSS中的文本輸入

回答

相關問題