How do I make the text appear under the center of the recipe image and be an equal distance from each other with css?
Question
So I am trying to create a website with recipes, so I put images of the recipes, with the name of the recipe underneath, but the problem is that they are not landing in the center beneath the image. They are the same distance apart, but I can't get each text to go under the image in the center. How would I do this? I would suggest viewing the result of the code in full view because I have not coded the website to work properly when the window is minimized. Also, you won't see the images because they are files on my computer.
<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>
1 answers
solution1
0 2021-02-12 07:45:02
You have your recipe names separate from your recipe images, which is difficult (if not impossible) to get everything to align. It would be easier to associate the names with the images in separate blocks. I set each block to float left to show how to align the text, but you could use flex to setup how your recipes will work on different screen sizes.
.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>
For future questions, you don't need to include all of the unused stuff like the header CSS. Just include enough to show the problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do i make each movie appear on under their respective date
How to make the text and the image appear next to each other?
4 images in a row, how do I center specific text under each image?
How do I align text boxes under each other in CSS/HTML
How do I make an element appear in the center of a screen from a link?
how do I add equal gap on each side of the text with css?
How to make divs be spaced at equal distance from each other so they will fit the screen width?
HTML/CSS: How do i make images from my website appear in other websites?
How to place blocks at equal distance from each other?
How do I make text appear on top of background image?
Related Tags