I can't figure out how to line up my images together. Why is not my picture display lining up next to each other? My pictures are not lining up next to each other and I need help to sort them out to make them stay in the middle or respect each other's spaces in the same block?
@import url('https: //fonts.googleapis.com/css2?family=Lobster&family=Playfair Display SC&family=Tapestry&display=swap');
h1{
color: #DEB992;
background-color: #051622;
display: block;
text-align: center;
padding: 10px;
font-size: 36px;
margin-top: 0;
border-bottom: 5px solid;
box-sizing: content-box;
}
.logo{
float: left;
padding: 0;
margin: 0;
width: 78px;
height: auto;
}
body{
margin: 0;
padding: 0;
background-color: #051622 ;
}
.intro-p{
text-align: center;
margin-left: 100px;
margin-right: 100px;
font-family: 'Tapestry', cursive;
font-size: 24px;
color: #DEB992;
}
.car-title{
color: #1BA098;
font-size: 24px;
text-decoration: overline;
font-family: 'Playfair Display SC', serif;
margin-left: 30px;
}
.cars-body{
width: 500px;
border-radius: 25px;
margin-left: 30px;
max-width: 35%;
}
.car-info{
color: #1BA098;
font-size: 20px;
margin-left: 30px;
margin-right: 400px;
}
<!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">
<link rel="stylesheet" href="gallery.css">
<title>Vehicle Gallery</title>
<img src="logo.jpeg" alt="nav-bar" >
<h1>Welcome to the Vehicle Gallery!</h1>
<br>
<p >Here we have displayed the most presitge vehicles with the best hd pictures! Hopefully these will give you thought on buying these cars that we recommend. </p>
</head>
<br><br>
<body>
<div>
<img src="car1.jpeg" >
<br>
<h2 >Dodge Challenger R/T Scat Pack Shaker</h2>
<br>
<p >
This has to be the most muscle car like vehicle on sale today. Its a somewhat regular model car with a lot of go fast goodies; a big powerful engine is prioritized over leather seats and luxury in this case. There’s also the fact that it has a shaker hood scoop, which ups the cool factor by 10.
</p>
<img src="car2.jpeg" >
<br>
<h2 >Buick Grand National </h2>
<br>
<p >
This choice may get some people’s knickers in a twist. They might think that because this car doesn’t have a V8 engine, it’s not a muscle car. However, it definitely has the spirit of the muscle car in it. It’s a relatively big 4 seat 2 door car that shouldn’t be underestimated at your local drag strip. This car pulled off the turbo 6 cylinder muscle car concept very well, and many people recognize that.</p>
</div>
CodePudding user response：
I think what you're trying to do is create a 'gallery' something like this:
[ IMAGE 1 ] [ IMAGE 2 ]
--------------------------------- --------------------------------
Title Title 2
Some words describing the image 1 Some words describing the image 2
This is entirely doable; exactly how you'd do it depends on whether you want a fixed number of these "sections" in a discrete grid (eg 3 rows of 3), or if you just want any number that fit into a row.
One way to do this would be to use flexbox. The structure would basically be this:
.container {
display: flex;
flex-wrap: wrap;
}
.section {
background-color: yellow;
margin: 14px;
}
img {
display: block;
width: 200px;
}<div >
<div >
<img src="image1.png" />
<h2>Title 1</h2>
<p>Description 1</p>
</div>
<div >
<img src="image2.png" />
<h2>Title 2</h2>
<p>Description 2</p>
</div>
<div >
<img src="image1.png" />
<h2>Title 3</h2>
<p>Description 3</p>
</div>
</div>The images are 200 pixels wide; depending on the size of your screen, you might see 1, 2, or 3 rows of panels. (The panels are colored yellow so they can be seen properly.)
Flexbox is useful when you just want the panels to "flex" and fit the available space. It's powerful and reactive.
But sometimes you want a more rigid structure; in that case you'd prefer to use grid layout. Here's the exact same example as above, but explicitly creating a 2-column grid (the last row will have only 1 item because we have 3 panels.)
.container {
display: grid;
grid-template-columns: 0.5fr 0.5fr;
column-gap: 14px;
row-gap: 14px;
}
.section {
background-color: yellow;
}
img {
width: 200px;
}<div >
<div >
<img src="image1.png" />
<h2>Title 1</h2>
<p>Description 1</p>
</div>
<div >
<img src="image2.png" />
<h2>Title 2</h2>
<p>Description 2</p>
</div>
<div >
<img src="image1.png" />
<h2>Title 3</h2>
<p>Description 3</p>
</div>
</div>So what you need to use for your use case depends on what you're actually trying to do.
Quick and dirty, here's your original code cleaned up to put the code into body (some of it was hanging out in head or between head and body) and with a simple flex layout applied.
@import url('https: //fonts.googleapis.com/css2?family=Lobster&family=Playfair Display SC&family=Tapestry&display=swap');
h1 {
color: #DEB992;
background-color: #051622;
display: block;
text-align: center;
padding: 10px;
font-size: 36px;
margin-top: 0;
border-bottom: 5px solid;
box-sizing: content-box;
}
.logo {
float: left;
padding: 0;
margin: 0;
width: 78px;
height: auto;
}
body {
margin: 0;
padding: 0;
background-color: #051622;
}
.intro-p {
text-align: center;
margin-left: 100px;
margin-right: 100px;
font-family: 'Tapestry', cursive;
font-size: 24px;
color: #DEB992;
}
.car-title {
color: #1BA098;
font-size: 24px;
text-decoration: overline;
font-family: 'Playfair Display SC', serif;
margin-left: 30px;
}
.cars-body {
width: 500px;
border-radius: 25px;
margin-left: 30px;
max-width: 35%;
}
.car-info {
color: #1BA098;
font-size: 20px;
}
.car-display {
display: flex;
}
<!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">
<link rel="stylesheet" href="gallery.css">
<title>Vehicle Gallery</title>
</head>
<body>
<img src="logo.jpeg" alt="nav-bar" >
<h1>Welcome to the Vehicle Gallery!</h1>
<br>
<p >Here we have displayed the most presitge vehicles with the best hd pictures! Hopefully these will give you thought on buying these cars that we recommend. </p>
<br><br>
<div >
<div >
<img src="car1.jpeg" >
<br>
<h2 >Dodge Challenger R/T Scat Pack Shaker</h2>
<br>
<p >
This has to be the most muscle car like vehicle on sale today. Its a somewhat regular model car with a lot of go fast goodies; a big powerful engine is prioritized over leather seats and luxury in this case. There’s also the fact that it has a shaker
hood scoop, which ups the cool factor by 10.
</p>
</div>
<div >
<img src="car2.jpeg" >
<br>
<h2 >Buick Grand National </h2>
<br>
<p >
This choice may get some people’s knickers in a twist. They might think that because this car doesn’t have a V8 engine, it’s not a muscle car. However, it definitely has the spirit of the muscle car in it. It’s a relatively big 4 seat 2 door car that
shouldn’t be underestimated at your local drag strip. This car pulled off the turbo 6 cylinder muscle car concept very well, and many people recognize that.</p>
</div>
</div>
</body>
</html>CodePudding user response：
Are you trying to align the image, heading and paragraph together next to the others image, heading and paragraph like cards? If so, You can use display: flex; like I have done below.
.flex {
display:flex;
}
.flex div {
width: 35%
}
h1{
color: #DEB992;
background-color: #051622;
display: block;
text-align: center;
padding: 10px;
font-size: 36px;
margin-top: 0;
border-bottom: 5px solid;
box-sizing: content-box;
}
.logo{
float: left;
padding: 0;
margin: 0;
width: 78px;
height: auto;
}
body{
margin: 0;
padding: 0;
background-color: #051622 ;
}
.intro-p{
text-align: center;
margin-left: 100px;
margin-right: 100px;
font-family: 'Tapestry', cursive;
font-size: 24px;
color: #DEB992;
}
.car-title{
color: #1BA098;
font-size: 24px;
text-decoration: overline;
font-family: 'Playfair Display SC', serif;
margin-left: 30px;
}
.cars-body{
width: 500px;
border-radius: 25px;
margin-left: 30px;
max-width: 35%;
}
.car-info{
color: #1BA098;
font-size: 20px;
margin-left: 30px;
margin-right: 400px;
}
<!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">
<link rel="stylesheet" href="gallery.css">
<title>Vehicle Gallery</title>
</head>
<body>
<img src="logo.jpeg" alt="nav-bar" >
<h1>Welcome to the Vehicle Gallery!</h1>
<br>
<p >Here we have displayed the most presitge vehicles with the best hd pictures! Hopefully these will give you thought on buying these cars that we recommend. </p>
<br><br>
<div >
<div>
<img src="car1.jpeg" >
<br>
<h2 >Dodge Challenger R/T Scat Pack Shaker</h2>
<br>
<p >
This has to be the most muscle car like vehicle on sale today. Its a somewhat regular model car with a lot of go fast goodies; a big powerful engine is prioritized over leather seats and luxury in this case. There’s also the fact that it has a shaker hood scoop, which ups the cool factor by 10.
</p>
</div>
<div>
<img src="car2.jpeg" >
<br>
<h2 >Buick Grand National </h2>
<br>
<p >
This choice may get some people’s knickers in a twist. They might think that because this car doesn’t have a V8 engine, it’s not a muscle car. However, it definitely has the spirit of the muscle car in it. It’s a relatively big 4 seat 2 door car that shouldn’t be underestimated at your local drag strip. This car pulled off the turbo 6 cylinder muscle car concept very well, and many people recognize that.
</p>
</div>
</div>
</body>
</html>