时间戳

首页 > 解决方案 > 如何使文本出现在食谱图像的中心下方，并且与 css 之间的距离相等？

html - 如何使文本出现在食谱图像的中心下方，并且与 css 之间的距离相等？

问题描述

所以我正在尝试创建一个带有食谱的网站，所以我把食谱的图片放在下面，食谱的名字在下面，但问题是它们没有落在图片下方的中心。它们相距相同的距离，但我无法让每个文本都放在中心的图像下方。我该怎么做？我建议以全视图查看代码的结果，因为当窗口最小化时，我没有对网站进行编码以使其正常工作。此外，您不会看到图像，因为它们是我计算机上的文件。

<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>

标签： htmlcss

解决方案

您的食谱名称与您的食谱图像分开，这很难（如果不是不可能的话）使所有内容对齐。将名称与单独块中的图像关联起来会更容易。我将每个块设置为向左浮动以显示如何对齐文本，但您可以使用 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。只需包含足以显示问题的内容。

推荐阅读