Is it possible to use HTML/CSS to have left-, center-, and right-aligned text on the same line under the following conditions?
The text on the left and right will be brief, but I do not know how long they will be.
The text in the center may be long enough to wrap.
The text in the center should be EXACTLY in the center.
The text in the center should not overlap the text in the left or right margins.
The obvious solution of using three divs, two of which are floating left and right, works well, except that the centerpiece of text is not exactly centered (for example, if the left piece of text is longer than the right, the center appears centered just right of the absolute center). I only need a solution that works on WebKit. Any ideas?
HTML:
<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>
CSS:
#left {
float: left;
text-align: left;
padding-right: 10px;
}
#center {
text-align: center;
}
#right {
float: right;
text-align: right;
padding-left: 10px;
}