CSS精灵与文字不对齐

Question

I am trying to create a website that has a user navigation bar at the top of the web page. However, I am unable to get the sprites, "profile-in" and "arrow" to align with the text "Alfred the Awful". I think that is something missing from my CSS style sheet code, but I cannot seem to figure out which part of the CSS style sheet is wrong.

I would greatly appreciate it if anyone could help me look at this.

Thanks!

 * { font-family: sans-serif; font-size: 16px; } *, html { box-sizing: border-box; } header { height: 50px; border-bottom: 1px solid gray; background-color: #F1F1F1; } header h1 { font-size: 1.5em; font-weight: bold; margin-left: 50px; line-height: 50px; } h1, h2, h3 { font size: 100%; font-weight: normal; } h2 { display: block; font size: 1.5em; font-weight: bold; } div { display: block; } .message { margin-left: 50px; } .select_users { position: absolute; right: 65px; top: 15px; } .profile-out, .profile-in, .arrow { display: inline-block; } .select_users h2 a { font-weight: bold; font-size: 0.9em; color: black; text-decoration: none; } .select_users h2 a:hover { color: #A32824; } ul.users_menu, ul.admin_menu { position: absolute; right: 0; border-left: 1px solid gray; border-bottom: 1px solid gray; background-color: #F1F1F1; } ul.users_menu { width: 200px; } ul.admin_menu { width: 150px; display: none; } ul.users_menu a, ul.admin_menu a { text-decoration: none; color: black; } .users_menu li a, .admin_menu li a { font-size: 0.75em; padding: 5px; display: block; } ul.users_menu li a:hover, .admin_menu li a:hover { background-color: #A32824; color: white; } ul.users_menu li.logout { border-top: 1px solid grey; text-transform: uppercase; } ul.users_menu li.logout a { background-color: white; color: black; } ul.users_menu li.logout a:hover { background-color: black; color: white; } .admin_users, .admin_movies { margin-top: 40px; margin-left: 50px; } .admin_users h2, .admin_movies h2 { font-size: 1.25em; margin-bottom: 20px; } .admin_table { border-spacing: 2px; border-collapse: separate; } .admin_table th { font-weight: bold; text-align: left; background-color: #F1F1F1; } .admin_table th, .admin_table td, .admin_table input { height: 35px; width: 200px; } th.admin_col, td.deletecell, td.insertcell { width: 80px; } .admin_table th, .admin_table input { padding-left: 5px; padding-right: 5px; } .admin_table input { font-size: 0.9em; } .admin_table input:focus { background-color: #FEE5AC; } .admin_table th, .admin_table td { border: 1px solid black; } input { outline: none; border: none; } input::-ms-clear { display: none; } .favs_list { float: left; width: 175px; margin-left: 45px; } .favs_list h2 { font-size: 0.8em; font-weight: bold; margin-top: 20px; margin-bottom: 10px; margin-left: 5px; } ul.favs { width: 170px; } ul.favs li a { display: block; font-size: 0.75em; text-decoration: none; color: black; padding: 7px 5px 7px 5px; } ul.favs li a:hover { color: white; background-color: #A32824; } .movie_list, .movie_single { margin-left: 225px; width: 610px; border: 1px dotted gray; } .movie_list { padding-top: 10px; } .welcome { font-size: 0.8em; text-align: justify; padding: 10px 10px 20px 10px; border-bottom: 1px dotted gray; } .movie_list h2, .movie_single h2 { font-size: 1.3em; padding: 5px 10px 10px 10px; } .movie_list ul { padding-top: 20px; } .movie_list li { padding-bottom: 10px; } .movie_list h3 a { font-size: 1.1em; color: #438BC5; font-weight: bold; display: block; margin-top: 0.5em; margin-bottom: 0.5em; text-decoration: none; } .movie_list h3 a:hover { text-decoration: underline; } .thumbnail { width: 178px; height: 100px; } .movie_list figcaption { display: inline-block; vertical-align: top; padding-left: 20px; } .movie_list .description { font-size: 0.75em; width: 400px; text-align: justify; padding-right: 10px; } .movie_player { width: 608px; height: 344px; } .movie_single h3 { font-size: 1.3em; padding: 10px; } .movie_single p { font-size: 0.8em; padding: 10px; } .movie_single .description { font-size: 0.75em; min-height: 80px; text-align: justify; } .actions { position: relative; height: 37px; border-bottom: 1px solid #CCC; } .actions .add_remove { position: absolute; right: 10px; } .actions .add_remove p { font-size: 0.75em; font-weight: bold; color: #999; } .actions .add_remove p:hover { color: black; border-bottom: 3px solid #993300; } /* All the sprite images */ .trash-hover, .trash, .delete, .delete-hover, .fav, .fav-hover, .insert, .insert-hover, .arrow, .arrow-hover, .profile-out, .profile-in, .success{ background: url('../images/sprites.png') no-repeat; } .trash-hover{ background-position: 0 -61px ; width: 60px; height: 60px; } .trash{ background-position: 0 0; width: 60px; height: 60px; } .delete{ background-position: 0 -130px ; width: 20px; height: 20px; } .delete-hover{ background-position: -21px -130px ; width: 20px; height: 20px; } .fav{ background-position: 0 -154px ; width: 20px; height: 20px; } .fav-hover{ background-position: -21px -154px ; width: 20px; height: 20px; } .insert{ background-position: 0 -177px ; width: 20px; height: 20px; } .insert-hover{ background-position: -21px -177px ; width: 20px; height: 20px; } .arrow{ background-position: -47px -132px ; width: 10px; height: 10px; } .arrow-hover{ background-position: -47px -142px ; width: 10px; height: 10px; } .profile-out{ background-position: 0 -199px ; width: 30px; height: 30px; } .profile-in{ background-position: -33px -199px ; width: 30px; height: 30px; } .success{ background-position: -44px -177px ; width: 20px; height: 20px; } /* End of sprite images */ footer { clear: both; height: 60px; border-top: 1px dotted gray; border-bottom: 1px dotted gray; margin-top: 30px; } footer p { line-height: 60px; margin-left: 50px; font-size: 0.7em; font-weight: bold; } footer a { font-size: inherit; color: black; } footer a:hover { color: #A32824; } 

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/reset.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="sprites/sprites.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="scripts/html5shiv-printshiv.js"></script> <![endif]--> <title>Instant Update Database Project by WebinAction.co.uk</title> </head> <body> <header> <h1>Instant Update Database Project</h1> </header> <nav class="navigation"> <div class="select_users"> <h2><a href='#'>Alfred the Awful</a></h2> </div> <div class="profile-in"></div> <div class="arrow"></div> <ul class = 'users_menu'><li><a href='#'>Albert Square</a></li><li><a href='#'>Bill Gaits</a></li><li><a href='#'>Gromit </a></li><li><a href='#'>James Olivier</a></li><li><a href='#'>King Beans II</a></li><li><a href='#'>Michael Douglas</a></li><li><a href='#'>Mike Cheeseyman</a></li><li><a href='#'>Mr Movieman</a></li><li><a href='#'>Steven Seagul</a></li><li><a href='#'>Sweeney Toad</a></li><li><a href='#'>The Queen of Sheba</a></li><li><a href='#'>Wallace </a></li><li class='logout'><a href='index.php'>Logout</a></li></ul> <ul class="admin_menu"> <li><a href="admin.php?page=users">Manage users</a></li> <li><a href="admin.php?page=movies">Manage movies</a></li> </ul> </nav> <nav class="favs_list"> <h2>Favourites</h2> <ul class="favs"> <li><a href="#">Movie Title</a></li> <li><a href="#">Movie Title</a></li> <li><a href="#">Movie Title</a></li> </ul> <div class='trash'></div> </nav> <section class="movie_list"> <h2>Hi, (username will appear here)</h2> <p class="welcome">Here are some movies you might like. Click on the heart icon to add them to your favourites list.</p> <ul> <li> <figure><a href="#"><img class="thumbnail" alt="Thumbnail" src="images-movies/thumbnail.png"></a> <figcaption> <h3><a href="#">Movie Title</a></h3> <div class="description">Movie description</div> <div class="add_remove favourite"></div> </figcaption> </figure> </li> <li> <figure><a href="#"><img class="thumbnail" alt="Thumbnail" src="images-movies/thumbnail.png"></a> <figcaption> <h3><a href="#">Movie Title</a></h3> <div class="description">Movie description</div> <div class="add_remove add favourite"></div> </figcaption> </figure> </li> <li> <figure><a href="#"><img class="thumbnail" alt="Thumbnail" src="images-movies/thumbnail.png"></a> <figcaption> <h3><a href="#">Movie Title</a></h3> <div class="description">Movie description</div> <div class="add_remove favourite"></div> </figcaption> </figure> </li> </ul> </section> <footer> <p>Instant update database project by <a href="mailto:learn@webinaction.co.uk">learn@webinaction.co.uk</a></p> </footer> </body> </html> 

Answer 1

You should be able to do position: absolute similar to how you are position the text, so something like this:

.profile-out {
  position: absolute;
  top: 25px;
  right: 30px;
}

Hope this helps

Answer 2

Wrap them in a <div> and set text-align:center; to that div.