How to center text vertically in a flexbox element

Questions about css

[stoveboltgeek]

I'm trying to modernize the code on our website. We use a bulletin board named UBBThreads. It allows you to create headers and footers with html and css.
This is the code that existed before I changed it.

<table width="100%">
<tr><td align="left">
<a href="https://www.example.com/ubbthreads/"><img src="https://www.example.com/ubbthreads/images/bbtitle_2020.jpg" width="450" border="0" alt="The example.com Forums"/></a></td>
<td align="right"><span style="font-family:Verdana,Arial,Helvetica,sans-serif;font-weight:bold;font-size:10pt">
 <a href="https://www.example.com/">Home</a> | <a href="https://www.example.com/faq">FAQ</a>
 | <a href="https://www.example.com/ubbthreads/">Forum</a>
 | <a href="https://www.example.com/ubbthreads/ubbthreads.php?ubb=cfrm&c=3">Swap
 Meet</a> | <a href="https://www.example.com/gallery">Gallery</a> |
 <a href="https://www.example.com/techtips/">Tech Tips</a> | <a href="https://www.example.com/events/">Events</a>
 | <a href="https://www.example.com/features">Features</a> | <a href="https://www.example.com/search.html">Search</a>
| <a href="http://www.cafepress.com/myexample" target="_blank">Hoo-Ya Shop</a>
 </span></table>

Of course, you're not supposed to be using tables for layout any more, so I decided to work on changing it. I wrote this code, which works, but I'm not happy with it.

<div style="display: flex; justify-content: space-between;">
<a href="https://www.example.com/ubbthreads/"><img src="https://www.example.com/ubbthreads/images/bbtitle_2020.jpg" width="450" border="0" alt="The example.com Forums"/></a>
<span style="font-family:Verdana,Arial,Helvetica,sans-serif;font-weight:bold;font-size:10pt; padding-top: 3.5em;">
 <a href="https://www.example.com/">Home</a> | <a href="https://www.example.com/faq">FAQ</a>
 | <a href="https://www.example.com/ubbthreads/">Forum</a>
 | <a href="https://www.example.com/ubbthreads/ubbthreads.php?ubb=cfrm&c=3">Swap
 Meet</a> | <a href="https://www.example.com/gallery">Gallery</a> |
 <a href="https://www.example.com/techtips/">Tech Tips</a> | <a href="https://www.example.com/events/">Events</a>
 | <a href="https://www.example.com/features">Features</a> | <a href="https://www.example.com/search.html">Search</a>
| <a href="http://www.cafepress.com/myexample" target="_blank">Hoo-Ya Shop</a>
 </span>
</div>

I'm not happy with the code for two reasons.

1. The image is a fixed width, which throws the menu completely off the screen on small devices.
   
2. Centering the text with padding only works in one screen size and makes it look goofy on small devices.

So, I have two problems to solve. How to make the image responsive, and how to make the menu display in the middle of the container that it's in.
To solve the responsive image problem, I changed that code to this:

<a href="https://www.example.com/ubbthreads/"><img src="https://www.example.com/ubbthreads/images/bbtitle_2020.jpg" style="max-width: 25vw; height: auto;" alt="The example.com Forums"/></a>

That seems to work fairly well, but on an iPhone 5 (viewed here: https://bluetree.ai/screenfly/ )the image is squished up in the left top corner and the menu consumes most of the screen.
I've been less fortunate figuring out how to get the menu to center vertically. I've tried a number of things.

display: flex; flex-basis: 6vh;

display: flex; justify-content: center; align-items: center;

Nothing I've tried has worked.

Here's what I'm trying to accomplish.

1. I want the image to resize proportionally on small devices
2. I want the menu to be centered vertically but justified right
3. On smaller devices I want the image to take up the same amount of vertical space as the menu but still be proportional

Am I asking for more than css can do?

[edited by: not2easy at 3:26 pm (utc) on Jul 11, 2022]
[edit reason] see Charter [/edit]

[not2easy]

For images to resize down you would need a line somewhere is your css like:

img { max-width: 100%; }

Flex-box is the right solution for some things, it may not be right for your application but we can't really tell with the snippets here.

Edited to add: the CSS for that div, independent of the rest of the css leaves a lot of possible cause/effect possibilities. Have you validated your work to rule out these possibilities? We do not want or need the entire .css file here, but external elements can affect this one section, so we hope it has been checked first.

I would not be too worried about how it appears on a test site using iPhone 5 as that is not a current model and no longer updated by Apple. Your browser (most do anyway) probably offers developer tools that are more accurate for rendering as mobile.

[lucy24]

style="max-width: 25vw; height: auto;"

Fortunately you don't need to do this; inline styling should be considered a last resort. Put it in the general css and if necessary it will override the image's individual height and width specifications (which should always be present).

I like to put it inside an @media rule, so the browser doesn't have to think about resizing unless it's a small device.

[stoveboltgeek]

Thanks, @not2easy and @lucy24. Since this is an include inside a massive php bulletin board, I have no idea what the stylesheets have in them. Since inline styling overrides all other styling, I felt the best way to ensure this snippet did what I wanted was to use inline styling.

I tried max-width; 100% but it blew the image up to a massive size. Maybe I did something wrong. I'll try it again.

The reason I used flexbox is because with space-between you can position two elements on the far edges of the screen, which is what I want. I like to avoid using padding, because that changes the appearance with a change in screen size. For the same reasons, using &nbsp; or <p> or <div> to center the element seemed a bad idea.

You have given me some ideas, however, so I'll do some more testing.

[lucy24]

I tried max-width; 100% but it blew the image up to a massive size. Maybe I did something wrong. I'll try it again.

Yeah, max-width defiitely isn't supposed to do that. Is it possible you had a brain fart and typed either "min-width" or simply "width" by mistake?

[not2easy]

If there is no limit on the container, that can happen. I understand that the bb css may be huge, but using developer tools can show you exactly what css (by line number) is involved in the <div in question. The inline styling would override a conflicting parameter, but if an element is in the 'big' css file with instructions that the inline styling does not mention, then the 'big' css can be causing the surprises.

If you can mention the browser you can get more explicit instructions. I believe you had mentioned in another thread that you used Safari and Firefox. Both of those browsers offer developer tools that can help you isolate css issues.

[stoveboltgeek]

I use Chrome for developer tools. I didn't know Safari had them.

I've settled on this as probably the best I can do.

<div style="display: flex; justify-content: space-between;">
<a href="https://www.example.com/ubbthreads/"><img src="https://www.example.com/ubbthreads/images/bbtitle_2020.jpg" style="width: 29vw; height: auto;" alt="The example.com Forums"/></a>
<span style="font-family:Verdana,Arial,Helvetica,sans-serif;font-weight:bold;font-size:10pt; padding-top: 5.7vh;"
   <a href="https://www.example.com/">Home</a> | <a href="https://www.example.com/faq">FAQ</a>
   | <a href="https://www.example.com/ubbthreads/">Forum</a>
   | <a href="https://www.example.com/ubbthreads/ubbthreads.php?ubb=cfrm&c=3">Swap
   Meet</a> | <a href="https://www.example.com/gallery">Gallery</a> |
   <a href="https://www.example.com/techtips/">Tech Tips</a> | <a href="https://www.example.com/events/">Events</a>
   | <a href="https://www.example.com/features">Features</a> | <a href="https://www.example.com/search.html">Search</a>
| <a href="http://www.cafepress.com/myexample" target="_blank">Hoo-Ya Shop</a>
   </span>
</div>

I tried a number of things including position, transform, line-height, etc. Using padding pushes the text down below the image on small devices, so I tried centering the image vertically, but that didn't do anything at all. At least the image is resizing on small devices, and the menu displays decently.

[stoveboltgeek]

Just to close the circle, this is what I ended up with after some more testing.

<div style="display: flex; justify-content: space-between;">
<span style="max-width: 450px; margin: auto; margin-left: 0; display: block;"><a href="https://www.example.com/ubbthreads/"><img src="https://www.example.com/ubbthreads/images/bbtitle_2020.jpg" style="max-width: 100%; height="auto;" alt="The example.com Forums"/></a></span>
<span style="font-family:Verdana,Arial,Helvetica,sans-serif;font-weight:bold;font-size:10pt; margin: auto; display: block;"
 <a href="https://www.example.com/">Home</a> | <a href="https://www.example.com/faq">FAQ</a>
 | <a href="https://www.example.com/ubbthreads/">Forum</a>
 | <a href="https://www.example.com/ubbthreads/ubbthreads.php?ubb=cfrm&c=3">Swap
 Meet</a> | <a href="https://www.example.com/gallery">Gallery</a> |
 <a href="https://www.example.com/techtips/">Tech Tips</a> | <a href="https://www.example.com/events/">Events</a>
 | <a href="https://www.example.com/features">Features</a> | <a href="https://www.example.com/search.html">Search</a>
| <a href="http://www.cafepress.com/myexample" target="_blank">Hoo-Ya Shop</a>
 </span>
</div>

Basically, using

margin: auto; display: block;

centers the menu and the image on the screen. Then

margin-left: 0;

moves the image to the left edge, which is what I wanted. So now, on a small device, the image stays in the center of the block on the left edge, and the menu collapses vertically to fit the window but still looks decent and is usable. And the image resizes to fit the viewport.

[not2easy]

Might have been a typo in this part:

height="auto;"

should be

height: auto;"

Good to hear you got it to work.

[stoveboltgeek]

Might have been a typo in this part:

Yikes! I make mistakes like that all the time. It's frustrating. My proof-reading skills are horrible.

Yeah, max-width defiitely isn't supposed to do that. Is it possible you had a brain fart and typed either "min-width" or simply "width" by mistake?

I must have made a mistake, because I'm using it now, and it's working as expected. It appears that using

max-width: 100%; height: auto;

is the solution (in general) for responsive images.