Anzeige von zwei UL-Elementen nebeneinander, vertikal und horizontal zentriert

Question

Ich habe schon eine Weile damit zu kämpfen und konnte nicht die richtige Lösung finden.

Am Ende der Seite habe ich eine Fußzeile, die die volle Breite hat. Darin möchte ich eine Liste von Nachrichten anzeigen und rechts daneben ein Symbol, in diesem Fall ist es ein Font Awesome-Symbol. Die Nachrichtenliste muss sowohl vertikal als auch horizontal zentriert sein und das Symbol muss vertikal zentriert sein.

Ich habe versucht, dies mit UL-Elemente mit Display: Inline-Block und Text-Align: Center. Die Nachrichten werden korrekt angezeigt, aber das Symbol bleibt an der gleichen Stelle hängen, unabhängig von der Größe des Containers.

Hier ist, was ich bisher habe:

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

und die 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/

Wer weiß, wie kann ich das erreichen?

Dank

Answer 1

Wenn Sie nur ein Symbol benötigen, können Sie Pseudo-Elemente verwenden :: bevor die Glocke

.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

Sie könnten line-height: 5; vertical-align: top;-.error-message-container .error-message-bell hinzufügen.

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

Answer 3

Sie flex-Box wie diese verwenden:
+ 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

versuchen, das zu ändern. Anzeige der Fehlermeldungsliste zu block und fügen margin-bottom: -5px; .Error-message-Glocke statt margin-top

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

Answer 5

Font-Ehrfürchtig bereits erledigt das für Sie durch das <i> Element verwenden und es in Ihrem <li> nistet. Siehe documentation. BTW, ich legte eine GEFAHR! Symbol nur für die Hölle davon.

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