CSSでのテキスト入力の調整

-1

私はウェブ開発の初心者で、Googleホームページのブートレグコピーを完成させようとしていますが、何らかの理由で私が取り組んでいる検索バーが中央に揃っていません。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：あなたは一部を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

あなたは問題があります。あなたが追加したものすべてから代わり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でのテキスト入力の調整

答えて

関連する問題