Struggling to align the text in a list with the SVG icons of the bullets?
I've tried numerous solutions found online, but setting vertical-align: middle doesn't seem to work. Additionally, applying
display: flex; align-items: center;Although I implemented this in React and that part seems to be functioning correctly (I believe?), I'll provide snippets of the HTML and CSS for reference.
HTML<div className="registration-form">
<div className="form-text-container">
<div className="form-text">
...
</div>
</div>
<div className="form-image-container">
...
</div>
</div>
CSS
.registration-form {
display: flex;
height: 60vh;
width: auto;
padding: 2.5%;
}
.form-text {
padding: 6%;
}
...
The current output looks like this- https://i.sstatic.net/xcbfM.png Take a look at how the bullets are displayed.