Question

我在角度应用中有一个列表，其中每个项目可以包含一个小图像（作为div的背景 - >红色）和一些文本或仅文本。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

是否有带有文字的图像，包含文字的div的中心会移动。所以这两个文本都不会成为一个在另一个之上。有什么方法可以“＃34; center＆＃34; item2的文本到li元素，以便与其前身一致（最好没有javascript）？

编辑：使用position: absolute似乎有效。但如果文本足够长，它就不会被打破（如同受欢迎），但它会消失在红色div之后或显示在它前面。由于红色div实际上将由图像填充，因此浮动文本不是一个好的决定...... 当然，我可以计算每个项目文本的宽度并手动打破这些行，但我更喜欢一种更简单的方法具体来说，我希望文本以列表项为中心（但不是文本div），而它的行被破坏，就像在宽度为：75％＆＃39的div中一样;。
有没有人有更多的提示？

由于

Answer 1

我希望你需要这样的东西：

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>

Answer 2

只需将容器添加到右侧，然后使用+兄弟选择器。

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%
}

Answer 3

另一种方法是使用absolute定位和transform，如下所示：

  <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>

和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;
}

这样做的好处是它不依赖于设置宽度，因此文本总是水平和垂直居中 - 无论文本或图像大小如何。

jsfiddle here。

将文字与父母的父母

3 个答案: