容器div中的中心字体真棒图标

Question

我有一个带有两个文本和一个字体真棒图标的按钮。两个文本应左对齐，而图标应居中对齐。

<div className="overlay">
    <span>Unifyed</span><br/>
    <span style={{fontSize: "14px", textAlign: "left"}}>iOS Developer</span><br/>
    <span><i className="icon fa fa-plus" /></span>
</div>

.overlay {
    display: inline-block;
    text-align: left;
    background: rgba(0, 0, 0, .35);
    padding-top: 15px;
    padding-left: 15px;
}

由于文本和图标都包含在overlay中，有没有办法将它们分配给不同的样式？我试图将文本和图标分成两个不同的overlay类，但由于它是一个叠加层，我需要所有这三个都在一个父容器下。

Answer 1

<i>标记不自我关闭.... <i class="xxxxx"></i>并且它们以及跨度始终显示为内联...将其更改为内联块或阻止。

如果您曾需要更新标记，那么避免使用<br />标记会很有用。 <br />标记邪恶。

.overlay {
    display: inline-block;
    text-align: left;
    background: rgba(0, 0, 0, .35);
    padding-top: 15px;
    padding-left: 15px;
}

/* below is added because clearly your CSS here is incomplete */

.overlay { width: 200px; height: 200px; }
span { display: block; }

<div class="overlay">
    <span>Unifyed</span>
    <span style="fontSize: 14px;">iOS Developer</span>
    <span style="text-align: center;"><i class="icon fa fa-plus"></i></span>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Answer 2

只需将图标添加到overlay div和aply text-align：center;

中的其他div中

.overlay {
    display: inline-block;
    text-align: left;
    background: rgba(0, 0, 0, .35);
    padding:15px;
}

.overlay .icon{
  text-align:center;
  padding:8px 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="overlay">
    <span>Unifyed</span><br/>
    <span style={{fontSize: "14px", textAlign: "left"}}>iOS Developer</span><br/>
    <div class="icon">
      <span><i class="fa fa-plus" aria-hidden="true"></i></span>
    </div>
    
</div>