並排顯示兩個UL元件，垂直居中和水平居中

Question

我一直在努力尋找一段時間，找不到合適的解決方案。

在頁面的底部，我有一個全角的頁腳。在它內部，我想顯示消息列表，並在其左側旁邊顯示一個圖標，在這種情況下，它是一個Font Awesome圖標。 消息列表需要垂直和水平居中，圖標必須垂直居中。

我已經嘗試使用顯示的ul元素來做到這一點：inline-block和text-align：center。 消息正確顯示，但圖標卡在同一個地方，不管其容器的大小。

這裏是我到目前爲止：

<div class="error-message-container"> 
    <ul class="error-message-bell"> 
    <li aria-hidden="true" class="fa fa-bell-slash-o"></li> 
    </ul> 
    <ul class="error-message-list"> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
    <li>consectetur adipiscing elit</li> 
    <li>Lorem ipsum dolor sit amet</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
    <li>Lorem</li> 
    <li>ipsum</li> 
    </ul> 
</div> 

和CSS：

.error-message-container { 
     border: 1px solid blue; 
     bottom: 0; 
     color: light-blue; 
     font-size: 12px; 
     left: 0; 
     position: fixed; 
     text-align: center; 
     width: 100%; 
} 

.error-message-container .error-message-bell { 
    display: inline-block; 
    font-size: 20px; 
    height: 100%; 
    margin-top: 0; 
    padding: 0; 
    vertical-align: middle; 
} 

.error-message-container .error-message-list { 
    display: inline-block; 
    font-weight: 500; 
    line-height: 1.2; 
    list-style-type: none; 
    margin-bottom: 11px; 
    margin-top: 11px; 
    padding-left: 8px; 
} 

https://jsfiddle.net/b1rw80jz/1/

有誰知道我能做到這一點？

感謝

Answer 1

如果你只需要一個圖標，你可以使用僞元素::之前鍾

.error-message-container { 
     border: 1px solid blue; 
     bottom: 0; 
     color: light-blue; 
     font-size: 12px; 
     left: 0; 
     position: fixed; 
     text-align: center; 
     width: 100%; 
} 

.error-message-container .error-message-list { 
    display: inline-block; 
    font-weight: 500; 
    line-height: 1.2; 
    list-style-type: none; 
    margin-bottom: 11px; 
    margin-top: 11px; 
    padding-left: 8px; 
    position: relative; /** this provides reference to the ::before element **/ 
} 

.error-message-list::before { 
    content: "\f1f6"; /** refers to awesome font **/ 
    font-family: FontAwesome; /** refers to awesome font **/ 
    position: absolute; /** this will stick to error-message-list **/ 
    top: 50%; /** this will position the icon 50% height of the error-message-list **/ 
    margin-top: -10px; /** minus half the icon height to truely vertically centered **/ 
    left: -20px; /** this will push it to the left out the error-message-list **/ 
} 

https://jsfiddle.net/b1rw80jz/6/

Answer 2

你可以添加line-height: 5; vertical-align: top;到.error-message-container .error-message-bell。

小提琴：https://jsfiddle.net/b1rw80jz/1/

Answer 3

你可以使用柔性盒這樣的：
+ CSS

.error-message-container { 
     border: 1px solid blue; 
     bottom: 0; 
     color: light-blue; 
     font-size: 12px; 
     left: 0; 
     position: fixed; 
     text-align: center; 
     width: 100%; 
} 

.error-message-container .error-message-bell { 
    display: inline-block; 
    font-size: 20px; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.error-message-container .error-message-list { 
    display: inline-block; 
    font-weight: 500; 
    line-height: 1.2; 
    list-style-type: none; 
    margin-bottom: 11px; 
    margin-top: 11px; 
    padding-left: 8px; 
} 
.center { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
} 

+ HTML

<div class="error-message-container center"> 
    <ul class="error-message-bell center"> 
    <li aria-hidden="true" class="fa fa-bell-slash-o"></li> 
    </ul> 
    <ul class="error-message-list"> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
    <li>consectetur adipiscing elit</li> 
    <li>Lorem ipsum dolor sit amet</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
    <li>Lorem</li> 
    <li>ipsum</li> 
    </ul> 
</div> 

Demo

Answer 4

嘗試改變。錯誤消息列表顯示到block並添加margin-bottom: -5px;到.error消息鈴，而不是邊距

https://jsfiddle.net/b1rw80jz/3/

Answer 5

字體 - 真棒使用<i>元素和你<li>嵌套在它已經爲您完成。請參閱documentation。順便說一句，我把危險！圖標只是爲了它的地獄。

<li><i class="fa fa-bell-slash-o" aria-hidden="true"></i> ERROR!</li> 

FIDDLE

Answer 6

HTML

<div class="error-message-container"> 
    <div class="inner-container"> 
    <ul class="error-message-bell"> 
    <li aria-hidden="true" class="fa fa-bell-slash-o"></li> 
    </ul> 
    <ul class="error-message-list"> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
    <li>consectetur adipiscing elit</li> 
    <li>Lorem ipsum dolor sit amet</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
    <li>Lorem</li> 
    <li>ipsum</li> 
    </ul> 
    </div> 
</div> 

CSS

.inner-container{margin: 0 auto; 
     display: inline-block;} 
.error-message-container .error-message-bell { 
    display: table-cell; 
    font-size: 20px; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0; 
    vertical-align: middle;} 
.error-message-container .error-message-list { 
    display: table-cell; 
    font-weight: 500; 
    line-height: 1.2; 
    list-style-type: none; 
    margin-bottom: 11px; 
    margin-top: 11px; 
    padding-left: 8px;}