Unable to get a section to align properly

HTML & CSS
1

New coder still stumbling in the dark here.

I have buttons that I cannot get aligned properly.

Here is my CodePen link. (I have stripped out all the PHP and Javascript to simplify it).

The “Add Tags” and “Cancel” buttons seem determined to align to the bottom of the container… and when they do, they also add some blank space underneath them.

Can someone please let me know why this is happening. I’ve tried everything in my knowledge to try to move them up, but they refuse to be moved up. They also seem to be attached to the alignment of the select fields row to the left of them.

I thought this might even be something related to the buttons, so for testing I just made some dummy div’s, but they too align in the same place.

2

I may have misunderstood the issue, but adding vertical-align: middle; to .select_width_150 seems to fix it for me.

1 Like
3

That indeed does work. Thank you so much for that.

I just don’t understand though why it works, since the buttons are not in the .select_width_150 container.

Clearly I just don’t understand how vertical-align works, as I thought it would only affect the elements within the container it is placed in.

What I am seeing happening, looks to me like it is essentially aligning all the elements in the parent container .tags_container ?

4

No, it is only affecting the inline element that it is placed on and aligns it regarding the text line it sits on.

1 Like
5

Not many people do :slight_smile:

The larger elements in the line box affect where the baseline is situated. When you change the vertical-alignment of the larger element to middle then it is aligned to the middle in respect of its baseline (it’s default position was baseline). This has the effect of moving the baseline to the middle of of the larger element. The other smaller elements that inhabit the line box were sitting on the baseline but now the baseline has moved to the middle of the larger element therefore they move along with it :slight_smile:

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.