See image for reference
Hey,
So I got a website where I show popular movies but some movie titles are longer than the others. How can I use CSS styling so I can make all the movie detail buttons appear on the same level and then for example centre the title Jurassic Hunt when compared to Shang-Chi.
Hope my explanation was good. Thanks in advance
CodePudding user response：
As I have understand your question that you want to set all the buttons on the same level. Just simply set the height of that element in which you want to write that paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StackOberFLow</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns:repeat(4,auto);
margin: 50px;
border: 2px solid black;
}
img {
height: 200px;
width: 150px;
}
.innerbox {
border: 2px solid red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 500px;
margin: 10px;
}
.boxelement p{
height: 150px;
}
.boxelement{
margin: 5px ;
padding: 5px;
}
.btn{
background-color: blueviolet;
border-radius: 10px;
padding: 10px 10px;
color:white;
border: 2px solid red;
}
.btn:hover{
cursor: pointer;
background-color: white;
color: black;
position: relative;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
facilis.
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
corrupti quasi laborum ducimus odit provident magni, molestiae
perspiciatis nemo porro.
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis,
quas reiciendis. Quod, modi! Aut iusto perspiciatis iure assumenda,
nesciunt ipsa expedita omnis aliquam dolore ipsum?
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
</div>
</body>
</html>
As you can see I have just added the height of the <p> tag and everything sets automatically.
.boxelement p{
height: 150px;
}
You can check this code by copying in a file and open with live server.
By the way if you know bootstrap then you can do this very easily just using bootstrap card. Here everything is already managed and you need not to worry about responsiveness of you site.
If there is any spelling mistake then please didn't mind. Thanks