No matter what I try I can’t seem to get these elements to stay centered when i resize my screen.
This is my code and CSS, I am remaking the Google homepage for a project. What would I put into the CSS in oder for the elements to stay the same and centered just like the Google Image? I appreciate any help, thank you.
<code><!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<ul class="topbar">
<li class="baritem"> <a href="Images.html">Images</a></li>
<li class="baritem"> <a href="Advanced.html">Advanced Search</a></li>
</ul>
</div>
<div class="centered">
<img src="googleimage.png" alt="google logo">
</div>
<form action="https://www.google.com/search">
<input type="text" name="q" class="rounded">
<input class="button" type="submit" value="Google Search">
<input class="lucky" type="submit" value="Im Feeling Lucky" name="btnI">
</form>
</body>
</html>
.centered{
display: flex;
justify-content: center;
}
.rounded{
position: fixed;
margin-top: 320px;
margin-left: 10%;
border-radius: 25px;
border: 1px solid black;
padding: 20px;
width: 538px;
height: 2px;
margin-bottom: 20px;
}
img{
display: block;
position: absolute;
margin-left: 0px;
margin-top: 200px;
height: 95px;
width: 272px;
}
.button{
display: block;
position: absolute;
left: 170px;
margin-top: 390px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 20px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
}
.lucky{
display: flex;
position: absolute;
left: 310px;
margin-top: 390px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 20px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
}
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<ul class="topbar">
<li class="baritem"> <a href="Images.html">Images</a></li>
<li class="baritem"> <a href="Advanced.html">Advanced Search</a></li>
</ul>
</div>
<div class="centered">
<img src="googleimage.png" alt="google logo">
</div>
<form action="https://www.google.com/search">
<input type="text" name="q" class="rounded">
<input class="button" type="submit" value="Google Search">
<input class="lucky" type="submit" value="Im Feeling Lucky" name="btnI">
</form>
</body>
</html>
.centered{
display: flex;
justify-content: center;
}
.rounded{
position: fixed;
margin-top: 320px;
margin-left: 10%;
border-radius: 25px;
border: 1px solid black;
padding: 20px;
width: 538px;
height: 2px;
margin-bottom: 20px;
}
img{
display: block;
position: absolute;
margin-left: 0px;
margin-top: 200px;
height: 95px;
width: 272px;
}
.button{
display: block;
position: absolute;
left: 170px;
margin-top: 390px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 20px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
}
.lucky{
display: flex;
position: absolute;
left: 310px;
margin-top: 390px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 20px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
}
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<ul class="topbar">
<li class="baritem"> <a href="Images.html">Images</a></li>
<li class="baritem"> <a href="Advanced.html">Advanced Search</a></li>
</ul>
</div>
<div class="centered">
<img src="googleimage.png" alt="google logo">
</div>
<form action="https://www.google.com/search">
<input type="text" name="q" class="rounded">
<input class="button" type="submit" value="Google Search">
<input class="lucky" type="submit" value="Im Feeling Lucky" name="btnI">
</form>
</body>
</html>
.centered{
display: flex;
justify-content: center;
}
.rounded{
position: fixed;
margin-top: 320px;
margin-left: 10%;
border-radius: 25px;
border: 1px solid black;
padding: 20px;
width: 538px;
height: 2px;
margin-bottom: 20px;
}
img{
display: block;
position: absolute;
margin-left: 0px;
margin-top: 200px;
height: 95px;
width: 272px;
}
.button{
display: block;
position: absolute;
left: 170px;
margin-top: 390px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 20px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
}
.lucky{
display: flex;
position: absolute;
left: 310px;
margin-top: 390px;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 20px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
}
New contributor
user26477913 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.