I need help with my CSS for the Projects section.
I just can’t seem to centre the images with the margin.
Here’s a link to my pen for assistance.
You’ve placed a margin property in the body element of your css and you’ve set the value of it to 0 (zero).
And you’ve set the value of the margin’s to auto in your CSS.
The margin property works in the body tag but a better place for it is in the css element you’re controlling the things you want margins with. Give the margin properties for the image a value, margin: 10px; for example.
I don’t believe auto is a value the margin property understands. I could be wrong but it makes sense that it wouldn’t since setting a margin usually has a value instead of something like auto, fixed, absolute, relative, etc.
When we give a CSS element property a value of 0 (zero) we’re telling it not to do anything. If we’re using a value of zero we may as well save the line space and not use that property. It will have the same result to exclude the property as it will have if it’s value is zero.
Remove the margin property from the body element and give the margin property in your image control element the value you want, a number with px after it.
For info on the margin element check out these links:
Sometimes we can use sizing properties instead of margins to control the size of objects and elements and sometimes it’s better to use size properties (height: 100px; and width: 200px) because a margin limits the canvas space an object is allowed to use. Size doesn’t effect the canvas area it only changes the actual size.
If you’re curious of what the difference between using top: 20px and top: 20em is px is an abbreviation for pixels which are the tiny squares on digital screens that display everything. When we use em the em helps make the element or object we use it on be proportionate to the screen the user is viewing our project on.
https://www.w3.org/Style/Examples/007/units.en.html#units
Happy coding!
1 Like
You aren’t really using the flexbox container correctly. You have placed a single flex child inside it. What you really want is multiple project-tile elements as the flex children, each with an image and text inside.
So instead of this:
<div class="project-container">
<div class="project-tile">
<img src="https://images.unsplash.com/photo-1522069365959-25716fb5001a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxMjMxNzk&ixlib=rb-1.2.1&q=80&w=400" alt="skyscrapper"><span id="img-description">Skyscrapper</span>
<img src="https://images.unsplash.com/photo-1651430459910-574130c46511?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxODgxODc&ixlib=rb-1.2.1&q=80&w=400" alt="building"><span>Building</span>
</div>
</div>
You would have this:
<div class="project-container">
<div class="project-tile">
<img
src="https://images.unsplash.com/photo-1522069365959-25716fb5001a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxMjMxNzk&ixlib=rb-1.2.1&q=80&w=400"
alt="skyscrapper"
/>
<span id="img-description">Skyscrapper</span>
</div>
<div class="project-tile">
<img
src="https://images.unsplash.com/photo-1651430459910-574130c46511?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxODgxODc&ixlib=rb-1.2.1&q=80&w=400"
alt="building"
/>
<span>Building</span>
</div>
</div>
With that change you can now add flex-wrap: wrap to the flexbox container, or you can manually switch to flex-direction: column using a media query.
You also need to think about how to center the text. One option is to just use a block-level element instead of a span (or set the span to display: block) and center the text using text-align.
As an aside, if you wanted to center the images with your current code you can add text-align: center on the project-tile parent container. But they won’t be correctly centered because of the span elements, if you make the span elements block-level elements they will be centered
2 Likes
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.