This is a chunk of text drawn from a database and inserted into html via Javascript. That is, I can't use class or elaborate css configurations. This has to be raw html and simple. How can I vertically center align the text Parent Opinion? I've tried vertical-align only in the parent, only in the client and as you see both. I've tried using a div with margin:auto 0; That didn't work. How do I make the text horizontally centered in the available space in the container? That is, centered from the right edge of the image to the end of the container div??? Sorry, guess I'm a noob - only been doing this 25 years. <div style="vertical-align:middle; border:1px solid red;"> <div style="display:inline-block; "> <img src="<undisclosed>" style="height:125px; width:250px;" > </div> <span style="vertical-align:middle;">Parent Opinion</span> </div> Code (markup):
Hi there SoftLink, does this help... HTML <div id="image-container"> <span></span> <span>Parent Opinion</span> </div> Code (markup): CSS body { background-color: #f9f9f9; font: normal 1em / 1.5 sans-serif; } #image-container { display: flex; align-items: center; border: 1px solid #000; background-color: #fff; } #image-container span:first-of-type { width: 15.625em; height: 7.8125em; background-image: url(https://via.placeholder.com/250x125/900/fff); } #image-container span:last-of-type { flex: 1; padding: 1em 0; text-align: center; } @media (max-width: 30em ) { #image-container { flex-direction: column; width: 15.625em; margin: auto; } } Code (markup): View it here... SoftLink - alignment problem coothead
denis bayly: Thanks. Man that's an awful lot of code just to center it both ways. CSS has always left a *lot* to be desired. I have to convert the classes to styles and then wrangle it in one huge piece of code. Again, thanks.
That may well be very true. Of course, on the other hand, there is now an awful lot less HTML than in your original code. Also note that some of the CSS was used to make the page responsive for mobile devices. coothead
Whiskey Tango Foxtrot in "JAvaScript" would even make that a thing, and if it is your ENTIRE process of building code should be sacked. Because sharting presentation into your markup in all but the rarest of corner cases is utter incompetent garbage use of HTML and CSS. That's why HTML / CSS numbnut "framework stupid" is incompetent trash. Just like the DIV you have doing FIGURE's job, the DIV for nothing around the IMG, and the SPAN doing FIGCAPTION's job. <figure class="parentOpinion"> <img src="<undisclosed>" alt="describe this image! ALT is not optional!!!" > <figcaption>Parent Opinion</figcaption> </figure> Code (markup): That said, I have no clue what the blazes you're trying to do for style, but guessing WILDLY? .parentOption { display:flex; align-items:center; border:1px solid red; } Code (markup): Again, this "can't use classes or CSS" BS probably means what you're working with is utter incompetent shite.
Jason: Thanks for your very animated response (as usual ""can't use classes or CSS" BS probably means . . . " think tinyMCE with no reference to a style sheet or scripts. Visually it's simple. I want to write a small, completely self contained (no css classes or script) chunk of code that will: show an image on the left and a chunk of text centered vertically on image height and horizontally (100% - image) to the right of the image. The html editor is a tinyMCE type of editor that I developed. The idea is to write the code in that editor with no reference to anything else. I don't really like the idea of having to use figure but that's really efficient code. Oh, the worthless div - opens a small image sizer so the user can change the img size. This doesn't work: https://codepen.io/SLSCoder/pen/MWLZwLV What am I missing? Got any vids of U playing sax?
This... .parentOption { display:flex; align-items:center; border:1px solid red; } Code (markup): ...should be... .parentOpinion { display:flex; align-items:center; border:1px solid red; } Code (markup): coothead
Well, you should have revisited post #2 to see how the text was centered there. Have a look here... Full Page View image Left + centered v & h Right Editor View image Left + centered v & h Right coothead
@coothead, You don't even need all the media query stuff. Flex-wrap is your friend. Also don't assume flex-grow's default is zero, and a max-width on the IMG might not be a bad idea. .parentOpinion { display: flex; flex-wrap:wrap; justify-content:center; align-items: center; border: 1px solid red; } .parentOpinion img { flex-grow:0; max-width:100%; } .parentOpinion figcaption { display:inline-block; flex-grow:1; font-weight: bold; font-size: 2rem; color:red; text-align:center; -webkit-text-stroke: 1px navy; padding: 0.5rem 0; } Code (markup): https://codepen.io/jason-knight/pen/MWLLJjG
You, of course, are absolutely right. At almost 80 years of age, I sadly seem to be overlooking far too many coding fundementals. The good news, though, is that I am not experiencing any incontinance problems just yet. coothead
Thanks for your responses. It *looks* good. That's an awful lot of code no matter how you toss it. It works. Again, thank you both. https://codepen.io/SLSCoder/pen/MWLZwLV <figure style="display: flex;flex-wrap:wrap;justify-content:center; align-items: center;border: 2px solid navy; padding:6px;"> <img src="https://dev.aecperformance.com/ClientFiles/Client5/FB-Grp-Logo-ChgoLng.png" alt="Preschool / Daycare MEASURE UP" style=" flex-grow:0; max-width:100%;"> <figcaption style="display:inline-block; flex-grow:1;font-weight: bold;font-size: 2rem;color:red;text-align:center;-webkit-text-stroke:1px navy;padding: 0.5rem 0;">Parent Opinion</figcaption> </figure> Code (markup):
What is your TinyMCE-like editor @SoftLink ? I am using the real TinyMCE and though I like it, it's pretty hard to configure (sometimes). Care to share?