卡片中的 HTML 居中图像和 h1

Question

我需要帮助将我创建的卡片中的图像和 h1 居中。我希望它们彼此相邻并水平居中。

https://jsfiddle.net/1tjpnvdt/

我尝试过使用 float ，但没有成功。我已将它们放在同一条线上，但无法将它们居中。

<section class="workers-section">
            <h2 class="section-heading">Töötajad</h2>
            <table class="workers_table">
                <tr>
                    <td>
                        <div id="mainbox">
                            <div class="card">
                                <img class="profile_pic" src="workers/default.jpg" alt="default">
                                <h1 class="name">Name</h1>
                                <p class="work"><span class="work_icon">💼 </span>Work</p>
                                <p class="mail"><span class="mail_icon">✉ </span>Email</p>
                                <p class="phone"><span class="phone_icon">✆ </span>Phone</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div id="mainbox">
                            <div class="card">
                                <img class="profile_pic" src="workers/default.jpg" alt="default" />
                                <h1 class="name">Name</h1>
                                <p class="work"><span class="work_icon">💼 </span>Work</p>
                                <p class="mail"><span class="mail_icon">✉ </span>Email</p>
                                <p class="phone"><span class="phone_icon">✆ </span>Phone</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div id="mainbox">
                            <div class="card">
                                <img class="profile_pic" src="workers/default.jpg" alt="default" />
                                <h1 class="name">Name</h1>
                                <p class="work"><span class="work_icon">💼 </span>Work</p>
                                <p class="mail"><span class="mail_icon">✉ </span>Email</p>
                                <p class="phone"><span class="phone_icon">✆ </span>Phone</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div id="mainbox">
                            <div class="card">
                                <img class="profile_pic" src="workers/default.jpg" alt="default" />
                                <h1 class="name">Name</h1>
                                <p class="work"><span class="work_icon">💼 </span>Work</p>
                                <p class="mail"><span class="mail_icon">✉ </span>Email</p>
                                <p class="phone"><span class="phone_icon">✆ </span>Phone</p>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div id="mainbox">
                            <div class="card">
                                <img class="profile_pic" src="workers/default.jpg" alt="default" />
                                <h1 class="name">Name</h1>
                                <p class="work"><span class="work_icon">💼 </span>Work</p>
                                <p class="mail"><span class="mail_icon">✉ </span>Email</p>
                                <p class="phone"><span class="phone_icon">✆ </span>Phone</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </section>

Answer 1

围绕图像和 h1 创建一个 div 并使用 flexbox 居中。

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 350px;
  border: 1px solid gray;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .7);
  border-top: 10px solid #222;
  min-height: 250px;
  padding-: 10px;
  margin: 10px;
  background-color: #FFF;
}

.card:hover {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .9);
}

.work,
.mail,
.phone {
  margin: 10px;
  font-family: segoe ui;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
}

<div class="card">
  <div class="center">
    <img class="profile_pic" src="http://placehold.it/50" alt="Inga">
    <h1 class="name">Inga Brandmeister</h1>
  </div>
  <p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
  <p class="mail"><span class="mail_icon">✉ </span>inga.brandmeister@frens.ee</p>
  <p class="phone"><span class="phone_icon">✆ </span>6 979 292</p>
</div>