Issue aligning images properly
Question
I want all of the images to be centered on the page, but to also repeat one after another with margins and all that. The problem is, they are all being lined in a straight line like this: when they should be going from left to right.
My HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Join the Team</title>
</head>
<style>
.__applyingfor {
width: 500px;
height: 150px;
margin: auto auto;
text-align: center;
}
.__applyoptions {
display: flex;
justify-content: center;
}
.__applyoptions ul{
display: flex;
list-style-type: none;
margin: 0;
background-size: cover;
padding: 10px;
}
.__applyoptions ul li{
margin-right: 1px;
}
.__applyoptions ul a{
display: flex;
position: relative;
}
.__apply-normal:hover {
opacity: 1;
}
.__apply-hover {
top: 0;
left: 0;
position: absolute;
opacity: 0;
}
.__apply-hover:hover {
opacity: 1;
}
#__title {
font-size: 25px;
}
#__title:hover {
color: #18A7B2;
}
</style>
<body>
<div class="__applyingfor">
<p id="__title">What Are You Applying For?</p>
</div>
<div class="__applyoptions">
<ul>
<li>
<a href="#">
<img class="__apply-normal" src="../images/helperapp.png">
<img class="__apply-hover" src="../images/helperapph.png">
</a>
<a href="#">
<img class="__apply-normal" src="../images/modapp.png">
<img class="__apply-hover" src="../images/modapph.png">
</a>
<a href="#">
<img class="__apply-normal" src="../images/adminapp.png">
<img class="__apply-hover" src="../images/adminapph.png">
</a>
<a href="#">
<img class="__apply-normal" src="../images/devapp.png">
<img class="__apply-hover" src="../images/devpph.png">
</a>
</li>
</ul>
</div>
</body>
</html>
4 answers
solution1
1 ACCPTED 2017-04-26 05:17:40
You can add display: inline-flex; or remove display:flex; in .__applyoptions ul a{ .
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Join the Team</title> </head> <style> .__applyingfor { width: 500px; height: 150px; margin: auto auto; text-align: center; } .__applyoptions { display: flex; justify-content: center; } .__applyoptions ul{ display: flex; list-style-type: none; margin: 0; background-size: cover; padding: 10px; } .__applyoptions ul li{ margin-right: 1px; } .__applyoptions ul a{ display: inline-flex; position: relative; } .__apply-normal:hover { opacity: 1; } .__apply-hover { top: 0; left: 0; position: absolute; opacity: 0; } .__apply-hover:hover { opacity: 1; } #__title { font-size: 25px; } #__title:hover { color: #18A7B2; } </style> <body> <div class="__applyingfor"> <p id="__title">What Are You Applying For?</p> </div> <div class="__applyoptions"> <ul> <li> <a href="#"> <img class="__apply-normal" src="http://placehold.it/100x150"> <img class="__apply-hover" src="http://placehold.it/100x150"> </a> <a href="#"> <img class="__apply-normal" src="http://placehold.it/100x150"> <img class="__apply-hover" src="http://placehold.it/100x150"> </a> <a href="#"> <img class="__apply-normal" src="http://placehold.it/100x150"> <img class="__apply-hover" src="http://placehold.it/100x150"> </a> <a href="#"> <img class="__apply-normal" src="http://placehold.it/100x150"> <img class="__apply-hover" src="http://placehold.it/100x150"> </a> </li> </ul> </div> </body> </html>
solution2
0 2017-04-26 05:12:02
Try this. Removed display: flex; from __applyoptions ul a . You need to display:flex; only to the container.
.__applyingfor { width: 500px; height: 150px; margin: auto auto; text-align: center; } .__applyoptions { display: flex; justify-content: center; } .__applyoptions ul { display: flex; flex-direction: row; list-style-type: none; margin: 0; background-size: cover; padding: 10px; } .__applyoptions ul li { margin-right: 1px; } .__applyoptions ul a { position: relative; } .__apply-normal:hover { opacity: 1; } .__apply-hover { top: 0; left: 0; position: absolute; opacity: 0; } .__apply-hover:hover { opacity: 1; } #__title { font-size: 25px; } #__title:hover { color: #18A7B2; }
<body> <div class="__applyingfor"> <p id="__title">What Are You Applying For?</p> </div> <div class="__applyoptions"> <ul> <li> <a href="#"> <img class="__apply-normal" src="../images/helperapp.png"> <img class="__apply-hover" src="../images/helperapph.png"> </a> <a href="#"> <img class="__apply-normal" src="../images/modapp.png"> <img class="__apply-hover" src="../images/modapph.png"> </a> <a href="#"> <img class="__apply-normal" src="../images/adminapp.png"> <img class="__apply-hover" src="../images/adminapph.png"> </a> <a href="#"> <img class="__apply-normal" src="../images/devapp.png"> <img class="__apply-hover" src="../images/devpph.png"> </a> </li> </ul> </div> </body>
solution3
0 2017-04-26 05:12:03
just add float:left; to the .__applyoptions ul a{} section:
.__applyoptions ul a{
display: flex;
position: relative;
float:left;
}
solution4
0 2017-04-26 05:18:56
Replace your li style with the following property:
.__applyoptions ul li {
margin-right: 1px;
float: left;
display: inline-flex;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Images and text not aligning properly
Images not aligning properly on Bootstrap
background images is not aligning properly
Why Images card are not aligning properly
Grid layout with images not aligning properly
Images are not properly aligning in responsive design
HTML Text & Images Not Aligning Properly
Images not aligning properly in table row but text is
CSS images not aligning properly leaving empty spaces
jQuery Masonry not aligning or filling images in the grid properly
Related Tags