Stack Overflow Asked by Lucid on February 23, 2021
The two main problems is the icons aren’t close to the corresponding text I tried padding but it didn’t work but that could have just been me, The second problem is the text is in the center of the page I think that might be the CSS because I added center so that the text would be centered to the image but maybe it’s affecting everything. This is the example I’m trying to make it look like.
[my website][1]
[example website][2]
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<link rel="javascript" href="javascript/script.js">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<style>
Body {
margin: 0;
height: 100vh;
}
canvas {
display: block;
}
.img-with-text {
text-align: center;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
</style>
<!-- <img src="imagesAboutme.png" alt="rorschach">
<img src="imagesContact.png" alt="Holding hands"> -->
<div class="img-with-text">
<img src="imagesFolder.png" alt="A folder" />
<p>Projects</p>
</div>
<div class="img-with-text">
<img src="imagesAboutme.png" alt="rorschach" />
<p>About me</p>
</div>
<div class="img-with-text">
<img src="imagesContact.png" alt="Holding hands" />
<p>Contact</p>
</div>
<div class="img-with-text">
<img src="imagesIdeas.png" alt="Holding hands" />
<p>Contact</p>
</div>
</html>```
[1]: https://i.stack.imgur.com/nfjQC.png
[2]: https://i.stack.imgur.com/z7BeK.png
It looks like [1] and [2] are the same image, so it doesn't help much.
Regarding the problem of moving the items to the left, I would suggest to wrap all <div class="img-with-text"> items in a <div class="items"> and set for it:
.items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
This way you have more control over your items.
About the distance between the text and image, <p> always comes with a default margin (top and bottom)...so maybe it could be that? If you wanna try it out just put:
.img-with-text p {
margin: 0;
}
A screenshot with your elements being inspected would help to visualize what you want.
Correct answer by vpalmerini on February 23, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP