Question

我无法找出为什么text1不会水平居中以及为什么图标不会出现（我只有一个黑点而不是蓝色图标和圆圈）。

<div id="texte_services">     
text1
</div>
  <div class="flex-container">
<div class="row">
    <div class="column">
        <p class="contenu">
            <img src="../Images/screen.png" alt="screen">
        </p>
    </div>
</div>                  
<table>
    <tr>
        <td>
            <div class="bullet">
            </div>
           <span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
           </span>
            <span class="bluePoint">&bull;
            </span>
            <span class="titleText">
            </span>
        </td>
        <td>
            <h3>UX design
            </h3>
            <p>text2
            </p>   
        </td>
    </tr>               
    <tr>
        <td>
            <div class="bullet">
            </div>
           <span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
           </span>
            <span class="bluePoint">&bull;
            </span>
            <span class="titleText">
            </span>
        </td>
        <td>
            <h3>UX design
            </h3>
            <p>text2
            </p>
        </td>            
    </tr>       
            <tr>
        <td>
            <div class="bullet">
            </div>
           <span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
           </span>
            <span class="bluePoint">&bull;
            </span>
            <span class="titleText">
            </span>
        </td>
        <td>
            <h3>UX design
            </h3>
            <p>text2
            </p>
        </td>            
    </tr>     
</table>
</div>

CSS

#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}

article
{
margin-right: 20px;
flex: 3;
}

.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}

h3, p
{
margin: 20px;
}


#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}

Answer 1

原因是因为你没有包含font-awesome.min.css的链接我只是添加了它，一切正常。

＆＃13;

#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}

article
{
margin-right: 20px;
flex: 3;
}

.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}

h3, p
{
margin: 20px;
}


#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="texte_services">
text1
</div>

<div class="flex-container">
<div class="row">
    <div class="column">
        <p class="contenu">
            <img src="../Images/screen.png" alt="screen">
        </p>
    </div>
</div>


<table>
    <tr>
        <td>
            <div class="bullet">
            </div>
           <span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
           </span>
            <span class="bluePoint">&bull;
            </span>
            <span class="titleText">
            </span>
        </td>

        <td>
            <h3>UX design
            </h3>
            <p>text2
            </p>


        </td>

    </tr>

    <tr>
        <td>
            <div class="bullet">
            </div>
           <span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
           </span>
            <span class="bluePoint">&bull;
            </span>
            <span class="titleText">
            </span>
        </td>

        <td>
            <h3>UX design
            </h3>
            <p>text2
            </p>
        </td>

    </tr>


            <tr>
        <td>
            <div class="bullet">
            </div>
           <span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
           </span>
            <span class="bluePoint">&bull;
            </span>
            <span class="titleText">
            </span>
        </td>

        <td>
            <h3>UX design
            </h3>
            <p>text2
            </p>
        </td>

    </tr>


</table>
</div>

＆＃13;

元素不水平居中，图标不显示（css）

1 个答案: