[FIXED] how to place image in the middle of the container and two buttons on bottom

Issue

I am new to html and css. My question is how do I place image and two buttons to be sure that they will be displayed together? Look at the image to understand what i mean. Thanks!!!!

Height alignment

Solution

This is my solution. Try opening the snippet in full screen, and then resize the browser.

When the width of the screen is greater than 768px(u can change this value) the width of the container is 500px.

And when the width is less, then the container takes full width of the screen.

This is handled by

.container {
  width: 500px;
  margin: 0 auto;
}

@media(max-width:768px) { 
  .container {
    width: 100%;
  }
}

As for the buttons, their combined width will be always equal to that of the image.

This is handled by

.btn-container {
  font-size: 0;/*used for removing whitespace from inline elements*/
}

.btn-container button {
  width: 50%;
  font-size: initial;
  padding: 15px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  margin: 0 auto;
}

@media(max-width:768px) { /* can be any number less than this depending on ur choice */
  .container {
    width: 100%;
  }
}

img {
  display: block;
  width: 100%;
  height: 200px;
}

.btn-container {
  font-size: 0;
}

.btn-container button {
  width: 50%;
  font-size: initial;
  padding: 15px;
}


/*Space between */

.btn-holder {
  width: 50%;
  display: inline-block;
}

.btn-holder button {
  width: 100%;
}

.b1 {
  padding-right: 5px;
}

.b2 {
  padding-left: 5px;
}

<div class="container">
  <img src="http:placehold.it/250x250">
  <div class="btn-container">
    <button>button 1 </button>
    <button>button 1 </button>
  </div>
</div>
<br/>
<br/>
<br/>

<h3>If u want space between buttons</h3>
<div class="container">
  <img src="http:placehold.it/250x250">
  <div class="btn-container">
    <div class="btn-holder b1">
      <button>button 1 </button>
    </div>
    <div class="btn-holder b2">
      <button>button 1 </button>
    </div>
  </div>
</div>

Answered By - Gautam Naik

Answer Checked By - Gilberto Lyons (PHPFixing Admin)