Center text inside relative div with no size

Question

I have following (simplified) HTML structure:

<table>
  <tr>
    <td>
      <div class="PromptContainer">
        <span class="Prompt">Prompt text</span>
      </div>
      <input type="text" name="..."/>
    </td>
  </tr>
</table>

and CSS:

.PromptContainer{
   width: 0;
   height: 0;
   position: relative;
   margin: 0 auto;
}

.Prompt{
   bottom: 0;
   padding-left: 0;
   white-space: nowrap;
   position: absolute;
}

I want to center span element over input element. Note that I cannot change size of .PromptContainer because of edge alignment rules (.Prompt element could be aligned to any edge of input element). The text inside span element has variable length and may be longer than width of input element. I cannot use javascript to perform this task, because it is too ineffective in my case (large number of such elements).

Edit: Image visualizing what I have and what I want to achieve is available here: enter image description here

Edit 2: Let me describe purpose of this question. We are writing new web-based runtime for giant old application written in even older technology (which worked as windows application). We have created converter from source code of this application to our new environment (ASP.NET). All controls in this old application are absolutely positioned, so we do it in the same way. Control (e.g. table of input tags) has its position and size, as well as prompt text associated with it. Prompt text is positioned relatively to control, so we don't know its absolute position during translation. Note that it depends on font settings, text, offset from control and edge of control to which the prompt is attached.

I'm trying to write a CSS rule to position prompt in right place. I've resolved almost all configurations, but I have big problem with centering.

Because of absolute positioning, I cannot use .PromptContainer with non-zero size - I only know position of control, not the .Prompt itself. Bigger .PromptCointainer would move entire control down.

Additionally prompt text longer than control width must not change size of control.

if you can provide the image you want to do will be more helpful to solve your problem — NullPoiиteя, Apr 20 '12 at 16:26
why do you need the span over the input element? do you mean literally centered over it? — squarephoenix, Apr 20 '12 at 16:27
I want to center text horizontally; I've uploaded image link at the end of my problem description — tomash, Apr 20 '12 at 16:41
Why do you have the width and height set to zero on .PromptContainer? — j08691, Apr 20 '12 at 16:52
.PromptContainer element is moved to appropriate position, usually corner of input element and acts as origin of text (prompt). I cannot simply put text before or after input tag because it may be moved by application to any edge of input element with optional offset between the input and .Prompt, text-alignment and justification. Note that this is done only by dynamic CSSes, not by javascript! I have javascript-based solution to this problem, but it is too slow. — tomash, Apr 20 '12 at 18:04

score 0 · Answer 1 · answered Apr 20 '12 at 16:50

0

This should center the text
.PromptContainer { text-align: center; }

answered Apr 20 '12 at 16:50

chadpeppers

2,057
1
20
27

It does not work in my case, because .PromptContainer must be positioned relatively to input element. If .PromptContainer has position: relative, .Prompt inside it has implied width: auto, therefore text-align is ineffective. Note that I do not know width of .Prompt. It depends on font and text. – tomash Apr 20 '12 at 18:38

score 0 · Answer 2 · answered Apr 20 '12 at 16:54

0

Like this?

http://jsfiddle.net/GZ7wR/1/

answered Apr 20 '12 at 16:54

Oswaldo Acauan

2,730
15
23

Unfortunately I've already tried this solution. It does not fit into my case. Please read **Edit 2** comment above. – tomash Apr 20 '12 at 18:33

Starx · Answer 3 · 2012-04-20T22:41:51.300

0

How about this?

.Prompt { display: inline-block; margin: 0 auto; }

edited Apr 20 '12 at 22:41

answered Apr 20 '12 at 16:58

Starx

77,474
47
185
261

Actually it does not work. I see no difference between page rendered by my code and with this snipped of CSS. (I noticed that you've probably wrongly typed #Prompt instead of .Prompt). – tomash Apr 20 '12 at 18:09

Center text inside relative div with no size

3 Answers3