I'm trying to get my images centered with my anchor text and I want them to go across horizontally. I also want the images and anchor text to be centered with the form.
Here's the full page:
Here's a picture of the problem:
I want the text that says, "Facebook, Google, and Apple ID" to be centered with the images and I also want the images and anchor text to be centered with the text above that says, "or sign up using...". I tried using "display: flex" for the anchor text and images but they stacked on top of each other, so I had to use "display: inline-flex" so they would go across horizontally.
/* the main page */
.main {
display: table-cell;
width: 89.3%;
vertical-align: top;
background-color: rgba(17, 13, 13, 0.904);
}
form {
border: 3px solid rgb(26, 25, 25);
background-color: rgb(26, 25, 25);
border-radius: 5px;
height: 85%;
width: 60%;
margin-top: 15px;
margin-left: 70px;
}
h1 {
text-align: center;
color: white;
font-size: 28pt;
font-family: 'Montserrat', sans-serif;
}
#user {
margin-left: 40px;
margin-right: 7.4em;
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#username {
padding-top: 10px;
padding-bottom: 10px;
margin-right: 13em;
border-radius: 5px;
margin-bottom: 1.5em;
width: 303px;
background-color: rgb(54, 53, 53);
border: 3px solid rgb(54, 53, 53);
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#mail {
margin-left: 40px;
margin-right: 9.7em;
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
margin-right: 13em;
border-radius: 5px;
width: 304px;
margin-bottom: 1.5em;
background-color: rgb(54, 53, 53);
border: 3px solid rgb(54, 53, 53);
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#pass {
margin-left: 40px;
margin-right: 7.5em;
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#password {
padding-top: 10px;
padding-bottom: 10px;
margin-right: 13.1em;
border-radius: 5px;
margin-bottom: 1.5em;
width: 304px;
background-color: rgb(54, 53, 53);
border: 3px solid rgb(54, 53, 53);
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#skill {
margin-left: 40px;
margin-right: 7.5em;
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#skill_level {
padding-top: 10px;
padding-bottom: 10px;
margin-right: 13.1em;
border-radius: 5px;
width: 313px;
margin-bottom: 1.5em;
background-color: rgb(54, 53, 53);
border: 3px solid rgb(54, 53, 53);
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#account {
margin-left: 15.6em;
width: 315px;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: rgb(76, 163, 76);
border: solid 3px rgb(76, 163, 76);
border-radius: 8px;
color: white;
margin-bottom: 1em;
}
#account:hover {
background-color: rgb(86, 228, 86);
border: 3px solid rgb(86, 228, 86);
color: white;
}
#alternatives {
text-align: center;
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
}
#facebook {
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
display: inline-flex;
text-align: center;
}
form a {
font-family: 'Inter', sans-serif;
color: rgb(172, 164, 164);
font-size: 10pt;
text-decoration: none;
display: inline-flex;
justify-content: center;
top: 5px;
}
form img {
display: inline-flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Chess Facts</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../styles/signin.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div id="outer-container">
<div class="sidebar">
<a href="#" id="chess_com"><img src='../images/best chess.com logo.png' id="chess-logo" alt="chess_logo" height='33px' width='110px'></a>
<div class="subnav">
<a href="play.html" class="subnavbtn"><img src="../images/play logo.webp" alt="play" id="play" height='25px' width='25px'><span>Play</span></a>
<div class="subnav-content">
<a href="#"><img src="../images/play logo.webp" id="chess" alt="play" height="21px" width="21px">Play</a>
<a href="#"><img src="../images/live chess icon (1).png" id="live" height="21px" width="21px"><span id="lively">Live Chess</span></a>
<a href="#"><img src="../images/sun icon (1).png" id="daily" height="21px" width="21px">Daily Chess</a>
<a href="#"><img src="../images/computer icon (1).png" id="comp" height="23px" width="21px">Computer</a>
<a href="#"><img src="../images/tournament_icon (1).png" id="tourney" height="22px" width="16px">Tournaments</a>
<a href="#"><img src="../images/4_player_chess_icon (1).png" id="four" height="27px" width="27px">4 Player Chess</a>
<a href="#"><img src="../images/chess_variants_icon (1).png" id="var" height="28px" width="36px">Variants</a>
<a href="#"><img src="../images/leaderboards_icon (1).png" id="leader" height="25px" width="25px">Leaderboard</a>
<a href="#"><img src="../images/library_icon (1).png" id="lib" height="25px" width="25px">Library</a>
</div>
</div>
<div class="subnav">
<a href="puzzles.html" class="subnavbtn"><img src="../images/puzzle_piece_logo (1).png" alt="puzzles" id="puzzles" height='26px' width='26px'>Puzzles</a>
<div class="subnav-content">
<a href="#"><img src="../images/puzzle_piece_logo (1).png" id="mypuz" height="22px" width="22px">Puzzles</a>
<a href="#"><img src="../images/puzzle logo.png" height="22px" id="puz_rush" width="22px">Puzzle Rush</a>
<a href="#"><img src="../images/puzzle battle logo.png" id="puz_battle" height="22px" width="22px">Puzzle Battle</a>
<a href="#"><img src="../images/daily puzzle logo (1).png" id="daily_puz" height="22px" width="22px">Daily Puzzle</a>
<a href="#"><img src="../images/solo chess logo (1).png" id="solo_chess" height="22px" width="22px">Solo Chess</a>
<a href="#"><img src="../images/drills logo (1).png" id="drills" height="22px" width="22px">Practice (Drills)</a>
<a href="#"><img src="../images/endgames logo (1).png" id="endgames" height="22px" width="22px">Endgames</a>
</div>
</div>
<div class="subnav">
<a href="learn.html" class="subnavbtn"><img src="../images/learn_logo (1).png" alt="learn" id="learn" height='23px' width='25px'>Learn</a>
<div class="subnav-content">
<a href="#"><img src="../images/learn_logo (1).png" id="lessons" height="22px" width="22px">Lessons</a>
<a href="#"><img src="../images/analysis icon (1).png" id="analysis" height="22px" width="22px">Analysis</a>
<a href="#"><img src="../images/articles (1).png" id="articles" height="28px" width="28px">Articles</a>
<a href="#"><img src="../images/videos icon (1).png" id="videos" height="28px" width="28px">Videos</a>
<a href="#"><img src="../images/vision icon (1).png" id="vision" height="25px" width="25px">Vision</a>
<a href="#"><img src="../images/chess openings icon (1).png" id="openings" height="27px" width="27px">Openings</a>
<a href="#"><img src="../images/explorer icon (1).png" id="explorer" height="22px" width="22px">Explorer</a>
</div>
</div>
<div class="subnav">
<a href="today.html" class="subnavbtn"><img src="../images/news logo (1).png" alt="today" id="today" height='30px' width='35px'>Today</a>
<div class="subnav-content">
<a href="#"><img src="../images/chess today icon (1).png" id="chess_today" height="25px" width="25px">Chess Today</a>
<a href="#"><img src="../images/news logo (1).png" id="new_news" height="30px" width="35px">News</a>
<a href="#"><img src="../images/chessTV icon (1).png" id="tv" height="27px" width="27px">ChessTV</a>
<a href="#"><img src="../images/streamers icon (1).png" id="streamers" height="30px" width="35px">Streamers</a>
<a href="#"><img src="../images/events icon (1).png" id="events" height="28px" width="28px">Events</a>
</div>
</div>
<div class="subnav">
<a href="connect.html" class="subnavbtn"><img src="../images/message logo (1).png" alt="connect" id="connect" height='27px' width='40px'>Connect</a>
<div class="subnav-content">
<a href="#"><img src="../images/message logo (1).png" id="forums" height='25px' width='35px'>Forums</a>
<a href="#"><img src="../images/chess clubs icon (1).png" id="clubs" height="22px" width="28px">Clubs</a>
<a href="#"><img src="../images/blogs icon (1).png" id="blogs" height="25px" width="30px">Blogs</a>
<a href="#"><img src="../images/world icon (1).png" id="members" height="30px" width="30px">Members</a>
<a href="#"><img src="../images/coaches icon (1).png" id="coaches" height="30px" width="30px">Coaches</a>
</div>
</div>
<div class="subnav">
<a href="more.html" class="subnavbtn"><img src="../images/more logo (1).png" alt="more" id="more" height='28px' width='35px'>More</a>
<div class="subnav-content">
<a href="#"><img src="../images/master games icon (1).png" id="master" height="22px" width="22px">Master Games</a>
<a href="#"><img src="../images/mobile apps icon (1).png" id="mobile" height="22px" width="22px">Mobile Apps</a>
<a href="#"><img src="../images/shop icon (1).png" id="shop" height="22px" width="22px">Shop</a>
<a href="#"><img src="../images/merch icon (1).png" id="merch" height="22px" width="22px">Merch</a>
<a href="#"><img src="../images/resources icon (1).png" id="resources" height="22px" width="22px">Resources</a>
<a href="#"><img src="../images/vote chess icon (1).png" id="vote" height="22px" width="22px">Vote Chess</a>
<a href="#"><img src="../images/top players icon (1).png" id="top" height="22px" width="22px">Top Players</a>
<a href="#"><img src="../images/chess rankings icon (1).png" id="ranking" height="25px" width="18px">Chess Rankings</a>
<a href="#"><img src="../images/chess terms icon (1).png" id="terms" height="22px" width="22px">Chess Terms</a>
<a href="#"><img src="../images/play logo.webp" id="rules" height="22px" width="22px">Rules</a>
<a href="#"><img src="../images/chess kids icon (1).png" id="kid" height="25px" width="18px">ChessKid</a>
<a href="#"><img src="../images/computer championship icon (1).png" id="comp_champ" height="22px" width="22px">Computer Championship</a>
</div>
</div>
<a href="sign-in.html" id="sign_up" target="_blank">Sign Up</a>
<a href="log-in.html" id="log_in" target="_blank">Log In</a>
<div id="bottom_sidebar">
<a href="" id="search"><img src="../images/search icon (1).png" alt='search'>Search</a>
<div id="mininav">
<a href="#" id="help"><img src="../images/question icon (1).png" alt='search'>Help</a>
<div id="second_subnav-content">
<a href="#">Ask a Question</a>
<a href="#">Report Abuse</a>
<a href="#">Make a Suggestion</a>
<a href="#">Billing Issues</a>
<a href="#">Report a Bug</a>
</div>
</div>
</div>
</div>
<div class="main">
<form action="/chess.php">
<h1>Join Now -- It's Free & Easy!</h1>
<label id="user" for="user">Username</label>
<input type="username" id="username" name="username" size="40">
<label id="mail" for="email">Email</label>
<input type="email" id="email" name="email" size="40">
<label id="pass" for="password">Password</label>
<input type="password" id="password" name="password" size="40">
<label id="skill" for="skill">Skill Level</label>
<select name="skill_level" id="skill_level">
<option value="New to Chess">New to Chess</option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
<option value="Expert">Expert</option>
</select>
<button id="account">Create Your FREE Account</button>
<p id="alternatives">Or Sign Up Using...</p>
<div id="socials">
<a href="#" id="facebook"><img src="../images/facebook logo (1).png">Facebook</a>
<a href="#"><img src="../images/google logo (1).png">Google</a>
<a href="#"><img src="../images/apple logo (1).png">Apple ID</a>
</div>
</form>
</div>
</div>
</body>
