How to center buttons on columns?

HTML-CSS
1

I am new to coding but I am trying to create 3 columns that are responsive and also rearrange to vertical with a media query less than 600px. I am having trouble getting 3 buttons to center themselves on each column and stay centered when screen size changes. Please help. Code below.

<!DOCTYPE html>
<html>

<div class='wrapper'>
  <div class='row'>
  
    <div class='column'>
      <div id='column1'>
      	<img id="media1" src="https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314_1280.jpg">
        <button id="button1">Shop</button>
	  </div>
    </div>
    
    <div class='column'>
    	<div id='column2'>
      	<img id="media1" src="https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314_1280.jpg">
        <button id="button2">Shop</button>
      </div>
    </div>
    
    <div class='column'>
      <div id='column3'>
      	<img id="media1" src="https://cdn.pixabay.com/photo/2014/12/15/17/16/pier-569314_1280.jpg">
      </div>
    </div>
    
  </div>
</div>

</html>

.wrapper {
  background-color: black;
}

.row {
  display: flex;
  flex-direction: row;

}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow:hidden;
  align-items: center;
  justify-content:center;
}

#column1 {
    height: 500px;
    background-color:orange;
}

#column2 {
    height: 500px;
    background-color: #3ccfff;
}

#column3 {
    height: 500px;
    background-color:red;
}

#button1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 16px;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  background-color: #155566;
  color: white;
  display: flex;
  opacity:.5;
  text-align:center;
}

#button1:hover {  
   opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}

#button2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 22px;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  background-color: #155566;
  color: white;
  display: flex;
  align-items:center;
  opacity:.5;
}

#button2:hover {  
   opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}
  
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
  display: flex;
  flex-direction: column;
  flex-basis: 100vw;
  flex: 1;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content:center;
  }
}
2

Absolute positioning (like you did with the buttons) will position the elements relative to the body of the page by default. You can set the position reference by setting any parent element’s position to relative. So here you might want to make the .column to be position: relative.

You might also want to prefer using class selectors instead of id selectors as much as possible, because applying styles around id selectors can get very difficult.

Also look up flexbox. Centering items are trivial with flexbox.

3

Thank you so much! Works perfect now.

4

Hi @mbo88, don’t forget to mark kevcomedia’s post as the solution, so other people can see that the problem has been solved.