所以我试图创建一个网站的食谱，所以我把食谱的图片，与食谱的名称下面，但问题是，他们没有降落在图像下面的中心。它们之间的距离是一样的，但是我不能让每个文字都在中间的图片下面。我该怎么做呢?我建议在完整视图中查看代码的结果，因为当窗口最小化时，我还没有将网站编码为正常工作。另外，你不会看到这些图像，因为它们是我电脑上的文件。
<style>
body{
background: rgb(239,239,239);
padding:0;
margin:0;
}
a:nth-child(2) {
margin-left: 300px;
}
nav{
height: 120px;
length:relative;
background: rgb(250,131,131);
}
.header{
overflow:hidden;
background-color: white;
padding: 20px 10px;
}
.header-right a {
float:right;
color:black;
text-align:center;
padding:12px;
text-decoration:none;
font-family: 'Paprika', cursive;
font-size:18px;
line-height: 25px;
border-radius:4px;
font-size:14px;
}
.header a.logo{
font-size: 25px;
font-weight: bold;
float:left;
font-family:"Poppins", cursive;
text-decoration:none;
color:black;
letter-spacing: 10px;
}
.header-right a:hover{
background-color: rgb(248,248,248);
color:black;
}
.header a.active {
background-color: rgb(225,225,225);
color:black;
}
.header-right input[type=text] {
float:right;
padding:6px;
margin-top:9px;
margin-right:16px;
font-size:17px;
}
.latest{
font-family: "Pavanam", snas-serif;
text-align: center;
letter-spacing:8px;
}
.simple{
font-family: "Pavanam", snas-serif;
text-align: center;
letter-spacing:8px;
font-size: 12px;
margin-top:300px;
}
hr{
width:10%;
}
.doball:hover, .cookie:hover, .cake:hover, .snacks:hover{
transform:scale(1.2);
box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}
a:nth-child(2) {
margin-left: 300px;
}
.choccook{
height:150px;
margin-left:50px;
margin-top:100px;
margin-bottom:50px;
width:230px;
height:230px;
}
.oreocak, .coffcake, .granbar,.banbread, .cinnroll{
height:150px;
margin-left:1.5px;
margin-bottom:50px;
width:230px;
height:230px;
object-fit:cover;
}
.choccook:hover, .oreocak:hover, .coffcake:hover, .granbar:hover, .banbread:hover, .cinnroll:hover{
opacity:50%;
}
.recip{
margin-left:50px;
margin-top:-50px;
font-size: 14px;
font-weight: bold;
font-family:"Pavanam", cursive;
text-decoration:none;
color:black;
letter-spacing: 5px;
}
.recipnameone,.recipnametwo, .recipnamethree, .recipnamefour, .recipnamefive{
margin-left:100px;
}
.doball, .cookie, .cake, .snacks{
margin-left:30px;
margin-bottom:100px;
width:80px;
height:80px;
object-fit:cover;
transition: 0.5s ease;
border-radius:50%;
}
.categories{
margin-left:550px;
}
.circone{
font-size: 13px;
font-weight: bold;
font-family:"Pavanam", cursive;
text-decoration:none;
color:black;
letter-spacing:3px;
}
.categnames{
margin-left:40px;
margin-top:-120px;
}
.circtwo, .circthree, .circthree, .circfour{
margin-left:55px;
.recipnamefive{
font-size:13px;
}
.recippics{
margin-top:-80px;
}
</style><!DOCTYPE html>
<html>
<head>
<title>Bake It Simple</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Paprika&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pavanam&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<a href="#" class="logo">BAKE IT SIMPLE</a>
<div class="header-right">
<a href="aboutbakingpage.html">About</a>
<a href="#">Recipes</a>
<input type="text" placeholder="Search...">
</div>
</div>
<h3 class="latest">LATEST RECIPES</h3>
<hr>
<div class="recippics">
<img class="choccook" src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg" href="#"></img>
<img class="oreocak" src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg" href="#"></img>
<img class="coffcake" src="file:///C:/Users/Pranavi.Kedari/Pictures/coffeecake.jpg" href="#"></img>
<img class="granbar" src="file:///C:/Users/Pranavi.Kedari/Pictures/granolabars.png" href="#"></img>
<img class="banbread" src="file:///C:/Users/Pranavi.Kedari/Pictures/bananabread.jpg" href="#"></img>
<img class="cinnroll" src="file:///C:/Users/Pranavi.Kedari/Pictures/cinnamonrolls.jpg" href="#"></img>
</div>
<p class="recip"><span class="recipname"> C.C. COOKIES</span> <span class="recipnameone"> OREO CAKE</span> <span class="recipnametwo"> COFFEE CAKE</span> <span class="recipnamethree"> GRANOLA BARS</span> <span class="recipnamefour"> BANANA BREAD</span> <span class="recipnamefive"> CINNAMON ROLLS</span></p>
<h3 class="simple">SO SIMPLE, IT TASTES BETTER</h3>
</hr>
<div class="categories">
<img class="doball" src="file:///C:/Users/Pranavi.Kedari/Pictures/doughcirc.jpg" href="#"></img>
<img class="cookie" src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg" href="#"></img>
<img class="cake" src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg" href="#"></img>
<img class="snacks" src="file:///C:/Users/Pranavi.Kedari/Pictures/granolabars.png" href="#"></img>
<div class="categnames">
<p class="circone"> DOUGHS <span class="circtwo"> COOKIES</span> <span class="circthree"> CAKES</span> <span class="circfour"> SNACKS</span></p>
</div>
</div>
</div>
</body>
</html>您将食谱名称与食谱图像分开，这很难(如果不是不可能的话)使所有内容对齐。将名称与单独块中的图像关联起来会更容易。我将每个块设置为左浮动，以显示如何对齐文本，但您可以使用flex来设置您的食谱如何在不同的屏幕尺寸上工作。
.recipe {
position: relative;
float: left;
padding: 0;
margin: 0;
margin-left: 25px;
width: 150px;
}
.recipe img {
width: 100%;
height: auto;
}
.recipe p {
width: 100%;
text-align: center;
}<div class="recippics">
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/cookies.jpg">
<p>C.C. COOKIES</p>
</div>
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/oreocake.jpg">
<p>OREO CAKE</p>
</div>
<div class="recipe">
<img src="file:///C:/Users/Pranavi.Kedari/Pictures/coffeecake.jpg">
<p>COFFEE CAKE</p>
</div>
</div>对于将来的问题，您不需要包括所有未使用的东西，如标题CSS。只要包含足以显示问题的内容就行了。