Question

我一直在努力解决这个问题，但无法找到合适的解决方案。

在页面底部，我有一个全宽的页脚。在里面，我想显示我的消息列表，并在其左侧旁边显示一个图标，在这种情况下，它是一个Font Awesome图标。消息列表需要垂直和水平居中，图标必须垂直居中。

我尝试过使用ul元素和display：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

你可以像这样使用flex-box：
+ 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 2

如果您只需要一个图标，则可以使用伪元素::之前的铃声

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

您可以将.error-message-container .error-message-bell添加到{{1}}。

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

Answer 4

尝试将.error-message-list显示更改为block并将margin-bottom: -5px;添加到.error-message-bell而不是margin-top

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

Answer 5

Font-Awesome已经为您使用<i>元素并将其嵌套在<li>中。请参阅documentation。顺便说一下，我把一个 DANGER！图标放在了地狱里。

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

并排显示两个UL元件，垂直和水平居中

6 个答案: