-1

I have a div in which I need to have both centered text and left-aligned text on the same line. This jsfiddle demonstrates what I have so far: http://jsfiddle.net/nDqvT/

The problem is that the left-aligned text pushes the centered text off-center. Is there any way to avoid this?

Clad
  • 1
  • 1
  • I don't understand what you're trying to accomplish by doing this. This [JSfiddle](http://jsfiddle.net/nDqvT/4/) shows your code with color so you can see nothing is being pushed "off-center" and your text is perfectly centered in the `div`. – Sparky Aug 09 '11 at 18:12
  • @Sparky I want to center the text as if the left-aligned div wasn't there. – Clad Aug 09 '11 at 18:15
  • @Sparky yeah, that's why I'm asking the question. – Clad Aug 09 '11 at 18:23

3 Answers3

1

If you can assign a width to the left text, you can then assign an offsetting margin to the centered text.

http://jsfiddle.net/nDqvT/1/

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Unfortunately that's not an option, the text to be centered and left-aligned is not known until the javascript loads it, and I'd prefer a solution that doesn't use pixel offsets and stuff. – Clad Aug 09 '11 at 18:13
  • Well, as far as I saw, you only added `text-align: left`, which still leaves the pixel-perfect offsets in there. Like I said, I have no idea what text will be going in the divs or what size the text will be. – Clad Aug 09 '11 at 18:22
  • 1
    Yeah, I reverted the update as I had forgotten to delete the margin. I think your only choice is going to be using position absolute, but that has plenty of issues of its own. If you can't constrain any of the widths, you have to deal with potentially overlapping content. Unless you can bend on some of your constraints, you may need a javascript solution. – James Montagne Aug 09 '11 at 18:53
  • @Clad: I agree with kingjiv. Your various requirements are in conflict with each other... every possible solution infringes upon one of your other constraints. – Sparky Aug 09 '11 at 19:26
1

Is this correct ? http://jsfiddle.net/nDqvT/36/

Maël Nison
  • 7,055
  • 7
  • 46
  • 77
  • That is what it should look like, but I can't use `position: absolute` because it doesn't belong at the top of the page. It's within a bunch of other divs in the middle of the page. Thanks though. – Clad Aug 09 '11 at 18:25
  • An absolute position is absolute to the first parent which has a custom position. That's why I've put a relative position to the div parent. That's not absolute to the body. =) – Maël Nison Aug 09 '11 at 18:26
  • OH ok, I never knew that. When I do your solution, I get this: http://jsfiddle.net/LCeYj/1/ where the centered/left div doesn't push other things down depending on how tall it is. Is that fixable? – Clad Aug 09 '11 at 18:30
  • I don't think it could be fix'd, sorry. If you find how to do, however, I'm curious :) – Maël Nison Aug 09 '11 at 18:39
0

Here you go.

http://jsfiddle.net/nDqvT/57/

The line break <br /> is used to ensure that the wrapper div has height. Without it, the wrapper looks empty within the content flow. Instead of <br />, you could use &nbsp; or just assign a height to the wrapper.

<div id="wrapper">
    <div id="left">Left Left Left Left Left Left Left Left</div>
    <div id="centered">Centered</div>
    <br/>
</div>

 

#wrapper {
    position: relative;
    display: block;
    width: 100%;
}
#left { 
    position: absolute;
    text-align: left;
    top: 0;
    left:0;
}
#centered {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;
}

EDIT:

This entire solution assumes the text will all fit on one line as per the OP: "I need to have both centered text and left-aligned text on the same line."

Anything longer than one line and it needs to hit the end of the div in order for it to wrap. To reach the end of a div before the edge of the window, the div must have a specified width.

The OP does not want the div's to have a specified width nor does he want the texts to overlap each other. Therefore, it seems like the various constraints of the OP are in conflict with each other which precludes an ideal solution.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • While the text is centered, this fiddle demonstrates the problem I'm getting with this way: http://jsfiddle.net/nDqvT/45/ – Clad Aug 09 '11 at 18:39
  • @Clad: When you give the wrapper a height, [it works](http://jsfiddle.net/nDqvT/56/). – Sparky Aug 09 '11 at 18:51
  • Yeah I know, but I would prefer not to specify stuff like height, width, etc, so that the text can be any length and still work. It removes a lot of flexibility when you start specifying stuff, no? – Clad Aug 09 '11 at 18:57
  • @Clad: The wrapper looks empty to the content flow. Instead of a height, you can simply add a `
    ` or a ` ` to the wrapper so that it no longer "appears" empty. See updated answer.     – Sparky Aug 09 '11 at 19:07
  • That still will work only if the text is one line. If I wanted to do that, it would be easier to make the `height: 1em` – Clad Aug 09 '11 at 19:14
  • @Clad: Where does it say you need this text to wrap? In your OP, you state, _"I need to have both centered text and left-aligned text **on the same line**."_ In all solutions posted here, text will not wrap until it gets to the end of the div, yet you also do not want your div's to have a specified width. Therefore, your left text and your centered text will overlap each other. It's kinda impossible to do what you want unless you specify a width. You have some tough choices to make. – Sparky Aug 09 '11 at 19:23