I need centering flexbox columns in conteiner

Natusya Zira 0
Viewed 45

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 class="collection">
        <li><a href="#"><img class="col-img" src="images/bouquets.jpeg" alt=""><p class="col-text">Букети</p></a></li>
        <li><a href="#"><img class="col-img" src="images/natural_flowers.jpeg" alt=""><p class="col-text">Живі квіти</p></a></li>
        <li><a href="#"><img class="col-img" src="images/own_bouquet.png" alt=""><p class="col-text">"Свій" букет</p></a></li>
</ul>

centering flexbox css
3 Answers

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 class="collection">
  <li>
    <a href="#">
      <img class="col-img" src="https://placekitten.com/500/300" alt="">
      <p class="col-text">Букети</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="col-img" src="https://www.fillmurray.com/500/300" alt="">
      <p class="col-text">"Свій" букет</p>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="col-img" src="https://www.placecage.com/500/300" alt="">
      <p class="col-text">"Свій" букет</p>
    </a>
  </li>
</ul>

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

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 class="collection">
        <li>
          <a href="#">        
            <div class="container">
              <img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
              <p class="col-text">Букети</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">        
            <div class="container">
              <img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
              <p class="col-text">Букети</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">        
            <div class="container">
              <img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
              <p class="col-text">Живі квіти</p>
            </div>
          </a>
        </li>
</ul>

Eric Alain0
Related