My 3 images need to be in screen center. I use flexbox. After adding size to images all of them go to left. Also I can't throw off margin

This is what I need

This is what I have

My cod:

.collection {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
 
} 

 <ul >
        <li><a href="#"><img  src="images/bouquets.jpeg" alt=""><p >Букети</p></a></li>
        <li><a href="#"><img  src="images/natural_flowers.jpeg" alt=""><p >Живі квіти</p></a></li>
        <li><a href="#"><img  src="images/own_bouquet.png" alt=""><p >"Свій" букет</p></a></li>
</ul>

CodePudding user response：

.collection {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

CodePudding user response：

Something like this?

li {
  margin-bottom: 3rem;
}

.collection {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container p {
  position: absolute;
  background: green;
  color: white;
}

<ul >
        <li>
          <a href="#">        
            <div >
              <img  src="https://dummyimage.com/300x150/000/fff" alt="">
              <p >Букети</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">        
            <div >
              <img  src="https://dummyimage.com/300x150/000/fff" alt="">
              <p >Букети</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">        
            <div >
              <img  src="https://dummyimage.com/300x150/000/fff" alt="">
              <p >Живі квіти</p>
            </div>
          </a>
        </li>
</ul>

CodePudding user response：

This can be solved by absolutely positioning your p tag on top of your image. Use translate and top/left rules to move it to the center. Also make the a tag as display:block so it effectively covers the image. See below.

Edited: There were a few small tweaks, the a tag had a 3 pixels below it which are space for descenders. This has been removed using line-height and means that images stack directly on top of each other. In the comments it was also stated that the images needed to be cropped and centered. This was done with display: flex on the anchor tag and then using align-self: center to prevent it from shrinking to the size of the parent div. Finally they were cropped using overflow:hidden. Now that the anchor tag is using flexbox the need to use inset and translate isn't needed as they center anyway.

Hope this helps

.collection {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  line-height:1;
  height: 200px;
  overflow: hidden;
  box-shadow: 0px 0px 20px 2px #757575;
}

a p {
  position: absolute;
  background-color: #A6BFEA;
  padding: 1rem 2rem;
  margin: 0;
  box-shadow: 0px 0px 20px 2px #757575;
  line-height:normal;
}

img {
  align-self:center;
  translate: auto -50%;
}

<ul >
  <li>
    <a href="#">
      <img  src="https://placekitten.com/500/300" alt="">
      <p >Букети</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img  src="https://www.fillmurray.com/500/300" alt="">
      <p >"Свій" букет</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img  src="https://www.placecage.com/500/300" alt="">
      <p >"Свій" букет</p>
    </a>
  </li>
</ul>