Link to home
Create AccountLog in
Avatar of Richard Korts
Richard KortsFlag 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

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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



User generated image
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.User generated image

https://getbootstrap.com/docs/3.4/css/#buttons
Avatar of 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
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.


 



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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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
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


User generated image
Instead of a padding, try border 0 or 1