align text to parent's parent

Question

I have a list in an angular-app where each item can either contain a small image (as a div's background -> red) and some text or only text.

li {
  display: flex;
  border: 1px solid black;
  width: 80%;
  margin-bottom: 5%;
  list-style: none;
  position: relative;
}

.text {
  text-align: center;
  width: 100%;
  background: lightgrey;
}

.image {
  background: red;
  width: 25%;
  height: 100%;
  position: absolute;
}

<ul>
  <li><div class="text"><p>item 1<br/>some text</p></div>
  </li>
  <li><div class="image"></div><div class="text split"><p>item 2<br/>some text</p></div>
  </li>
  <li><div class="image"></div><div class="text split"><p>item 2<br/>some more text in a very very long line which may break at the end</p></div>
  </li>
</ul>

Is there's an image with some text the center of the div containing the text will move. So both texts won't be one above the other. Is there any way to "center" the text of item2 to the li-element so that is consistent to its predecessor (preferably without javascript)?

EDIT: Using position: absolute seems to work. But if the text is long enough it won't be broken (as favored) but it will disappear behind the red div or is shown in front of it. Since the red div will actually be filled by an image, floating text over it wouldn't be a good decision... Of course I could calculate the width each item's text and break the lines manually but I would prefer an easier way.
To be specific, I want the text to be centered to the list-item (but not to the text-div) while it's lines are broken like in a div with 'width: 75%'.
Does anyone have some more hints?

Thanks

Not sure if absolute positioning is acceptable, but, you could do something like this: https://jsfiddle.net/f60juvpq/ — sinisake, Dec 08 '16 at 19:06
Here are three options: http://stackoverflow.com/q/38948102/3597276 — Michael Benjamin, Dec 08 '16 at 19:14

score 2 · Answer 1 · answered Dec 08 '16 at 19:07

I hope you needed something like this:

li {
  display: flex;
  border: 1px solid black;
  background: lightgrey;
  width: 80%;
  margin-bottom: 5%;
  list-style: none;
  position: relative;
}

.text {
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.image {
  background: red;
  width: 25%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.more {
   width: 60%;
}

<ul>
  <li><div class="text"><p>item 1<br/>some text</p></div>
  </li>
  <li><div class="image"></div><div class="text split"><p>item 2<br/>some text</p></div>
  </li>
  <li><div class="image more"></div><div class="text split"><p>item 3<br/>some text</p></div>
  </li>
</ul>

score 2 · Answer 2 · answered Dec 08 '16 at 19:09

Another way to do this is to use absolute positioning and transform, as below:

  <div class="wrapper">
    <div class="image">
    </div>
    <div class="text">
      THIS IS CENTERED TEXT
    </div>
  </div>

  <div class="wrapper">
    <div class="text">
      THIS IS CENTERED TEXT
    </div>
  </div>

and the css:

.wrapper {
  height: 100px;
  width: 300px;
  margin: 0 auto;
  margin-top: 10px;
  border: 2px solid black;
  position: relative;
}

.text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%);
}

.image {
  height: 100px;
  width: 100px;
  background: red;
}

The advantage of this is that it does not rely on setting widths, so the text is ALWAYS centered both horizontally and vertically - regardless of text or image size.

jsfiddle here.

score 1 · Answer 3 · answered Dec 08 '16 at 19:02

Just always add the container to the right and use the + sibling selector.

HTML:

<li>
    <div class="image"></div>
    <div class="text split">
        <p>item 2<br/>some text</p>
    </div>
    <div></div>
</li>

CSS:

.image + .text {
    width: 50%
}

.image + .text + div {
    width: 25%
}

align text to parent's parent

3 Answers3