Centering Text on Image after padding values

24 Views Asked by At

I'm creating an Image, the Image has text on it. The text I want it to be center on the Image but the Image has padding values that I assigned.

The equation I'm using and the values for the variables are the following:

image_width = 500
text_width = 300
left_p = 35
right_p = 35
current_width = ((image_width - (left_p + right_p)) - text_width)/2 + left_p

This provides me with current_width = 100. This is the starting point where I should be putting the text, right? This centers the text on the image perfectly.

The problem occur when I change my left_p and right_p values. If I need the text to be centered after 200 pixels from the left, I assigned the left_p = 200. Right? But this little equation that I have here does not provide me the starting point after the 200 pixels from the left,. It still centers the image, just with a larger padding (from the left and from the right.) And this is not what I want.

What would be the equation that will center the text after the padding values I assigned?

I know this might look like a StackOverflow question but I believe it is not since I know how to implement an answer; I'm just troubled about what the real equation might be. Another thing is that I don't know what the tags might be for this question, so I'm using "algebra". I will accept any suggestion about this.

2

There are 2 best solutions below

0
On BEST ANSWER

It seems what you want is left_p+image_width/2 to be the center point for both the image and the text. If this is so, the left edge of the text starts at left_p+image_width/2-text_width/2.

1
On

Note that if left_p=200 then your left margin is 200 and text is 300 so if you want to be on the page (which is 500 wide), right_p must be 0.

If you use that, then your formula gives $$(500-(200+0)-300)/2+200 = 200$$ as expected (i.e. start the text directly on the margin)