Align two buttons that are in two different DIVs

Question

So I tried to play a bit with my code and was looking on many forums to see if the answer was already given. I didn't find anything yet. I wanted to know how to align the buttons divs to each other, like this :

At this time, my code is this :

.directeur {
  width: 50%;
  float: left;
}

.directeur p {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.directeur a>img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

<div class="directeur">
  <img src="http://via.placeholder.com/500x150" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
  <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
</div>
<div class="directeur">
  <img src="http://via.placeholder.com/500x150" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
  <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
</div>

Can someone help me ? I created other Divs, tried Vertical-Align and Inline-Block. I want the Green Button Rectangle to align like this in my code. At the moment, they are not align because of the height of the text box.

Answer 1

You can use display:table-cell and position. I have taken the liberty of adding a wrapper around the two .directeurs. See it it works for you.

.directeur-wrapper{
display:table;
}
.directeur{
display:table-cell;
width:50%;
padding:20px 20px 80px;
position:relative;
}
.directeur img{max-width:100%;}
.directeur a{position:absolute; bottom:0;}

<div class="directeur-wrapper">
<div class="directeur">
            <img src="http://via.placeholder.com/500x150" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
            <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
        </div>
        <div class="directeur">
            <img src="http://via.placeholder.com/500x150" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
            <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
        </div>
        </div>

Answer 2

Have you tried this.

.custom_element{
position: absolute;
left:0;
right:0;
text-align: center;
}

Replace custom_element with your required element.

Answer 3

This is a job for Flexbox!

1. Wrap you whold code in a flexbox container, which will ensure all your .directeurs have the same height
2. Use flexbox for your .directeur, with flex-direction: column to arrange sub-elements vertically.
3. Set margin-top: auto on your last element (.directeur a) to ensure it will always be a the very bottom of its parent.

.directeurs {
  display: flex;
}
.directeur{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.directeur p {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}
.directeur a {
  margin-top: auto;
}
.directeur a > img{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

<div class="directeurs">
  <div class="directeur">
    <img src="http://via.placeholder.com/500x150" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
    <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
  </div>
  <div class="directeur">
    <img src="http://via.placeholder.com/500x150" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
    <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
  </div>
</div>

Answer 4

Set a min-height for the

Lorem ipsum parts of this to make them the same:

        .directeur{
        width: 50%;
        float: left;
    }
    .directeur p {
        width: 80%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        margin-top: 10px;
        min-height: 225px;
    }
    .directeur a>img{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        display: block;
    }

<div class="directeur">
            <img src="http://via.placeholder.com/500x150" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime impedit amet labore facere. Quod quos consectetur nulla eaque soluta tenetur omnis quo sunt, modi optio iste consequuntur atque error.</p>
            <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
        </div>
        <div class="directeur">
            <img src="http://via.placeholder.com/500x150" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rem delectus enim dolorem, error nulla earum maxime aliquid ipsam, recusandae molestiae ducimus iusto, dolore omnis. Saepe temporibus autem, provident dolor!</p>
            <a href=""><img src="http://via.placeholder.com/300x70" alt=""></a>
        </div>

Or you can use some javascript to measure the tallest one then make the other one the same height on page load, something like Equalise.