僞元素上的全高以及其內容的垂直居中

Question

僞元素上沒有position: absolute是否可以具有全高？

如果不是，我如何將僞元素的內容與position: absolute對齊？

首先Codepen沒有position: absolute http://codepen.io/anon/pen/gWPoVx

使用position: absolutehttp://codepen.io/anon/pen/bWELGv

HTML

<div class="fusion-layout-column"> 
    <div class="fusion-column-wrapper"> 
     <p>Lorem ipsum</p> 
    </div> 
    </div> 

SCSS

第二次嘗試210

.fusion-layout-column { 

    .fusion-column-wrapper { 
    background: #fff; 
    display: flex; 
    align-items: center; 
    overflow: hidden; 
    padding-right: 1em; 

    &:before { 
     content: 'G'; 
     background: #ddd; 
     display: inline-block; 
     padding: 2em 1em; 
     margin-right: 1em; 
     height: 100%; 
    } 

    } 
} 

我擅長使用任何黑客只是爲了在現代瀏覽器:)

Answer 1

如果你想爲背景，全中心的內容全高，我會分裂中的兩個僞每個任務這一工作-elements。

以下是您的代碼的簡化版本。我使用::before作爲背景，::after作爲內容。

.fusion-layout-column { 
 
    width: 400px; 
 
    margin: auto; 
 
} 
 

 
.fusion-column-wrapper { 
 
    position: relative; 
 
    background: #fff; 
 
} 
 

 
.fusion-column-wrapper:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 4em; 
 
    background: #ddd; 
 
} 
 

 
.fusion-column-wrapper::after { 
 
    content: 'G'; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 2em; 
 
    transform: translate(-50%, -50%); 
 
    color: #333; 
 
    font-weight: 700; 
 
} 
 

 
.fusion-column-wrapper p { 
 
    margin-left: 5em; 
 
    font-size: 18px; 
 
    line-height: 1.4em; 
 
} 
 

 
body { 
 
    background: #333; 
 
}

<div class="fusion-layout-column"> 
 
    <div class="fusion-column-wrapper"> 
 
    <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p> 
 
    </div> 
 
</div>