Misaligned HTML

App Building
1

I used an html component, because I just wanted a bar that would divide the top components from the bottom components. It works fine, but the html div element is not centered (vertically) in the component. Why, and how do I get it to be centered?

HTML
"<"div"><"h5">"Last Month"</"h5"></"div">"
(I had to add the quotes, because the editor wanted to display the html elements, not the string.)

CSS
div {
display: block;
background-color: #415b76;
color: #f6fafd;
margin: auto;
text-align: center;
height: 40px;
}

image
image1125×381 13.3 KB

2

Since you are defining the height the div is offsetting the alignment. You should use a padding property instead of height:

image
image1253×355 15.8 KB

3

Follow-up:

If you do want to use height as a property, you could also use display: flex; and set the justifications to be centered.

In any situation, it appears that trying to include the <h5> headers will offset your alignment as well. Defining the font-weight and font-size in the CSS is a better choice.

4

Thanks for your suggestions. I found a workaround for now, but I think it's a bit of a hack. I put a negative margin at the top of the element. I may need to consider some of your recommendations later if it breaks on a larger screen, but I'm worrying about other things first.

div {
display: block;
background-color: #415b76;
color: #f6fafd;
margin: auto;
margin-top: -15px;
text-align: center;
height: 40px;
}

h5 {
padding: 10px;
}