CODEWITHSUNDEEP
htmlcss
Squallz
Squallz

Reputation: 59

Issue aligning images properly

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: enter image description here 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>

Upvotes: 0

Views: 46

Answers (4)

Pratik Chaudhari
Pratik Chaudhari

Reputation: 1

Replace your li style with the following property:

.__applyoptions ul li { 
 margin-right: 1px;
 float: left;
 display: inline-flex;
}

Upvotes: 0

athi
athi

Reputation: 1683

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>

Upvotes: 0

cosmoonot
cosmoonot

Reputation: 2189

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>

Upvotes: 1

Raz Zelinger
Raz Zelinger

Reputation: 696

just add float:left; to the .__applyoptions ul a{} section:

.__applyoptions ul a{
      display: flex;
      position: relative;
      float:left;
    }

jsfiddle

Upvotes: 0

Related Questions