HTML 使图像居中和卡片内的 h1

Question

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

https://jsfiddle.net/1tjpnvdt/

我已经尝试过用浮子做过的事情，但没有让它工作。我已经让他们在同一条线上，但无法将它们居中。

<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

在图像周围创建一个div，h1并使用弹性框居中。

.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>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 292</p>
</div>

Answer 2

您需要做的就是将display: inline-block添加到.name和.profile_pic- 这样它们将排在一行中。如果您将text-align: center添加到.card- 它将水平居中内容。 我还向.profile_pic和.name添加了vertical-align: middle，因此它在内联时垂直居中。

var divs = $("td");
for (var i = 0; i < divs.length; i += 3) {
divs.slice(i, i + 3).wrapAll("<td class='split_3'></td>");
}

.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;
text-align: center;
}
.card:hover {
box-shadow: 1px 1px 3px rgba(0, 0, 0, .9);
}
.profile_pic {
border-radius: 50%;
width: 70px;
height: 70px;
margin-top: 10px;
border: 1px solid transparent;
border-color: rgba(0, 0, 0, .3);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.name {
font-weight: lighter;
margin-bottom: 35px;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.work,
.mail,
.phone {
margin: 10px;
font-family: segoe ui;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
}
#mainbox,
.split_3 {
box-sizing: border-box;
justify-content: center;
display: flex;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.card {
width: 100%;
}
td {
width: 100%;
}
}
.workers_table {
margin-left: auto;
margin-right: auto;
}
.workers-section {
background-color: #FFF;
padding-bottom: 80px;
}
.mail_icon,
.phone_icon {
font-size: 20px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}
.work_icon {
font-size: 15px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/inga.jpg" alt="Inga">
<h1 class="name">Inga Brandmeister</h1>
<p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 292</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/kadri.jpg" alt="Kadri" />
<h1 class="name">Kadri Eensalu</h1>
<p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 285</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/default.jpg" alt="Anedt" />
<h1 class="name">Anedt Trumsi</h1>
<p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 200</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/default.jpg" alt="Maire" />
<h1 class="name">Maire Linke</h1>
<p class="work"><span class="work_icon">💼 </span>Peakokk</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6064 918</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/tanel.jpg" alt="Tanel" />
<h1 class="name">Tanel Vimm</h1>
<p class="work"><span class="work_icon">💼 </span>Teenindus- ja logistikajuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 287</p>
</div>
</div>
</td>
</tr>
</table>
</section>

Answer 3

第一次删除h1顶部default margin，然后将h1的显示更改为inline-block以将其对齐到image旁边。现在text-aligndiv 中的中心parent对齐中心卡片中的图像和文本。

.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);
}
.profile_pic {
border-radius: 50%;
width: 70px;
height: 70px;
margin-top: 10px;
border: 1px solid transparent;
border-color: rgba(0, 0, 0, .3);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
text-align: center;
}
.name {
font-weight: lighter;
margin-bottom: 35px;
text-align: center;
margin-top: 0px; /*Add this*/
display: inline-block; /*Add this*/
}
.work,
.mail,
.phone {
margin: 10px;
font-family: segoe ui;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
}
#mainbox,
.split_3 {
box-sizing: border-box;
justify-content: center;
display: flex;
flex-wrap: wrap;
text-align: center; /*Add this*/
}
@media (max-width: 768px) {
.card {
width: 100%;
}
td {
width: 100%;
}
}
.workers_table {
margin-left: auto;
margin-right: auto;
}
.workers-section {
background-color: #FFF;
padding-bottom: 80px;
}
.mail_icon,
.phone_icon {
font-size: 20px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}
.work_icon {
font-size: 15px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}

<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/inga.jpg" alt="Inga">
<h1 class="name">Inga Brandmeister</h1>
<p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 292</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/kadri.jpg" alt="Kadri" />
<h1 class="name">Kadri Eensalu</h1>
<p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 285</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/default.jpg" alt="Anedt" />
<h1 class="name">Anedt Trumsi</h1>
<p class="work"><span class="work_icon">💼 </span>Projektijuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 200</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/default.jpg" alt="Maire" />
<h1 class="name">Maire Linke</h1>
<p class="work"><span class="work_icon">💼 </span>Peakokk</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6064 918</p>
</div>
</div>
</td>
<td>
<div id="mainbox">
<div class="card">
<img class="profile_pic" src="workers/tanel.jpg" alt="Tanel" />
<h1 class="name">Tanel Vimm</h1>
<p class="work"><span class="work_icon">💼 </span>Teenindus- ja logistikajuht</p>
<p class="mail"><span class="mail_icon">✉ </span>[e-mail]</p>
<p class="phone"><span class="phone_icon">✆ </span>6 979 287</p>
</div>
</div>
</td>
</tr>
</table>
</section>

Answer 4

您可以添加align="center"属性以水平对齐td内容，而无需额外的 css。 这是链接