將文字與父母的父母對齊

我在angular-app中有一個列表，其中每個項目都可以包含小圖像（作爲div的背景 - >紅色）以及一些文本或僅文本。將文字與父母的父母對齊

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>

有一些文字的圖像包含文本將移動div的中心。所以這兩個文本不會是一個在另一個之上。有什麼辦法可以將item2的文本「居中」到li元素，以便與其前任（最好不使用javascript）保持一致？

編輯：使用position: absolute似乎工作。但是，如果文字足夠長，它不會被破壞（如所喜歡的），但它會消失在紅色的背後，或者顯示在它的前面。由於紅色的div實際上會被圖像填充，所以浮動文本不會是一個好的決定...... 當然，我可以計算每個項目的寬度並手動分割線條，但我更喜歡更簡單的方法。
具體而言，我希望文本的中心位置爲列表項（但不是文本div），而行的寬度爲75％時，它的行被打破。
有沒有人有更多的提示？

感謝

來源

2016-12-08 user3479074

不確定絕對定位是否可以接受，但是，您可以這樣做：https://jsfiddle.net/f60juvpq/ – sinisake

這裏有三個選項：http://stackoverflow.com/q/38948102/3597276 –

有沒有人有更多的想法？ – user3479074

只是一直容器添加到右側，並使用+兄弟選擇。

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

來源

2016-12-08 19:02:49

我希望你需要的是這樣的：

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>

來源

2016-12-08 19:07:01 nmnsud

另一個辦法做到這一點是使用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。

來源

2016-12-08 19:09:10

將文字與父母的父母對齊

回答

相關問題