Hi, folks. So CSS in general is proving to be my mortal enemy. I just can’t seem to find the stream of logic that makes all it work. I’ve completed the freeCodeCamp HTML and CSS challenges and done several projects, and on all of them, I’m finding that the most basic formatting tasks take hours or defeat me completely. Today I ran into a perfect example and I thought it was about time I made a post here to see if anyone might help dig me out of this.
I’m doing the Drum Machine project in the Front End Frameworks section here, and I’m trying to center a letter within a ‘drum pad’ container. I’ll link my Codepen project, but I’m still working on the project, so it may change. Here’s the code specific to what I’m working with. First the CSS, then the React element being styled.
.drum-pad {
border: 1px solid white;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
.pad-content {
border: 1px solid red;
}
-----------------------------------------
const DrumPad = function(props) {
return (
<div className="drum-pad" id={props.id}>
<p className='pad-content'>{props.letter}</p>
<audio src={props.src} className="clip" id={props.letter} />
</div>
);
};
{props.letter} is the text within each box. The red border around .pad-content is just to help me see what’s going on. Justify-content works just fine, but align-items not so much. It didn’t work at all at first, but I learned you have to set a height to your element for it to have an effect, so that has been corrected. I also tried removing the audio element, thinking that maybe it was taking up space and confusing the alignment, but that didn’t change anything.
Any suggestions on how to fix this specific problem, or resources on understanding the logic behind CSS generally, (like setting the height of an element for align-items to work, how are you supposed to know that?), would be much appreciated.
Here’s the Codepen link: https://codepen.io/LuosRestil/pen/MWWoKmd?editors=0110
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.
