Avatar of Richard Korts
Richard Korts
Flag for United States of America asked on

CSS to horizontally enter text on images

I am trying to figure out the CSS such that I can position text in two lines on an image. Based on the font size of the text & the size of the image (a button), I know the top & bottom offsets of the text, but since the text will differ in content (& length) of each usage, I want CSS to figure the centering position so that the center of the text is at exactly 50% of the image width.


Please look at this: https://lakoshvac.com/dev/btn_sample_wtext.html


The top button is using positioning determining the left side based on the precise content of the two lines. The middle button (& CSS) is my attempt to use % which totally fails. The bottom image is a button with content as a part of the button, we DON'T want to do it that way because we want to use an included CSS file with each page where needed so we can change other things without having to modify 35 php programs each time we make a change.


Can someone show me the correct CSS to achieve this?


Of course you can see my  current CSS by view source on the link above.


Thank you

CSS

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
Scott Fell

Richard, you want to use a button tag like below, then style the button with the gradient background.  


<style>
span{display:block}
</style>
<button>
           <span>This is a line</span>
             <span>This is another line</span>
  </button>

Open in new window



Scott Fell

You can use one of many tools to create the css for the button like https://w3codegenerator.com/html/button-generator

You can also use the browser console to look at how it is done using bootstrap, adjust the colors and create your own class. That would be the easiest.  Instead of btn-warning, you might use btn-customblue. In the browser console, you can click on the color and see a color picker to play with.

https://getbootstrap.com/docs/3.4/css/#buttons
Richard Korts

ASKER
I don't need to create the button, I have an image & it is styled with it's own CSS. That's all taken care of

I need to know how to properly place the text on TWO lines on top of the button with a fixed pixel distance from top & bottom (so they are centered vertically) and ALSO centered horizontally. I cannot figure out how to center the lines HORIZONTIALLY. Text will be different in every case but we want standard CSS throughout the app. We don't want to have 78 buttons (or whatever the number is) as images.

The example given here, I need like the Centered thing but only centered horizontally.
https://www.w3schools.com/howto/howto_css_image_text.asp
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Scott Fell

Right, but for what you are trying to do, the proper method is to use the button tag in the manner I have shown.

The example you showed on w3schools is not for a button or input.

For a lack of a better term, you are trying to do something the input type=button is not supposed to do and will end up with odd results.


 



Richard Korts

ASKER
You are saying <input type="image"...> does not work? I've used it for years. You are saying I can't put text on top of those?

OK, I'll try to do it your way.

The simple example you gave is fine, but the customer SPECIFICALLY want's the button styled (color, box-shadow, rounded corners) as in the examples I showed.

Can I style <button> that way? I'm guessing yes.

The simple example you gave is fine, I don't see what makes it center the text, maybe that's default. But I know the customer want's the text like I indicated nnpx from the top and nnpx from the bottom, and with control over the vertical spacing between the top line & bottom line.

I don't understand the CSS to do that & I don't understand why in your example the text lines are centered. It's good they are, but it can't be magic.

Richard
ASKER CERTIFIED SOLUTION
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Richard Korts

ASKER
OK, it looks pretty good to me.

Check this: https://lakoshvac.com/dev/btn_sample_wscott_fell.html

There is one issue the customer will jump on & I don't know why it's that way. Notice the box shadow using your CSS has solid black on the bottom & left, whereas the other one has it kind of a blurry gray all around. I like yours better, but he probably won't.

The only difference I see (which I didn't think mattered) was in my CSS the color is #7F7F7F; whereas yours is &7f7f7f; Does that make a difference?

Thanks,

Richard
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Scott Fell

Using call caps or lower case in your css code will not make a difference.

For the border, you can add a border color like below.  You can play with the border in css to refine.  The key to tell your client is it may not be exact as the image, it is very close, but this acts like a button. You can see in your live example what happens when you click the button, it shows the press/click vs the image version does not.  It will also play  nicer if you are making a site responsive.
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://www.w3schools.com/css/css_border.asp

background: url(https://lakoshvac.com/dev/images/btn_normal.png);
    width: 179pxcmmminpcptchemremvhvwvminvmax;
    height: 75pxcmmminpcptchemremvhvwvminvmax;
    color: white;
    box-shadow: 0px 0px 4px 2px #7f7f7f;
    border-radius: 15pxcmmminpcptchemremvhvwvminvmax;
    font-size: 20px;
    border-color: #7f7f7f;


}

Open in new window



Scott Fell

Instead of a padding, try border 0 or 1