CODEWITHSUNDEEP
htmlcss
Jason_Hough
Jason_Hough

Reputation: 464

Align a button at the bottom of a grid

I am trying to assign the button : called 'go to form' right at the bottom of the grid i have done in CSS.

enter image description here

I have messed around with the relative position but this seems not to want to work. Any ideas guys ? 

  .item {
border: 1px rgb(160,160,255) solid;

}

img {
border-radius: 2px;
border: 1px solid #ddd;
height : 100px;
width : 80%;
}

p {
font-size: 18px;
}

h1 {
font-size: 14px;
}

</style>
<div class="grid-container">
<div class="item"> 
    <img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​ 
    <p> Sheep Dipper </p>
</div>
<div class="item">​<img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​​ 
    <p> Laptop Request​ </p> 
    <h4> Use this form to request a new laptop</h4> 
    <button>Go to Form</button> </div>
<div class="item">​ 
    <img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​ 
    <p> New User Request </p> 
</div> 
<div class="item">
    <img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​ ​​ 
    <p> Permissions Management </p> 
</div>
<div class="item">​​​ 
    <img src="/sites/TeamSite/SiteAssets/placeholder.jpg" alt="Paris"/>​ ​<br/>​<br/>​<br/>​​<br/>​<br/></div>
</div>

Upvotes: 0

Views: 4920

Answers (2)

Kaustav Banerjee
Kaustav Banerjee

Reputation: 114

Try this. Position absolute will place the button with respect to its immediate parent, and bottom attribute makes sure it starts at the very bottom of the parent. You may add top margin in case your button lacks a gap on top of it.

.grid-container{
  position: relative;
}

.youBtnClass {
  position: absolute;
  bottom: 0;
  margin: 0 auto;      
}

Upvotes: 0

nagiatzi
nagiatzi

Reputation: 106

try this one :

.grid-container{
  position: relative;
}

.youBtnClass {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

Upvotes: 3

Related Questions