Question

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

我已经尝试过漂浮物并没有让它起作用。我已将它们放在同一条线上，但无法使它们居中。

<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>inga.brandmeister@frens.ee</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>kadri.eensalu@frens.ee</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>anedt.trumsi@frens.ee</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>maire.linke@frens.ee</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>tanel.vimm@frens.ee</p>
                                <p class="phone"><span class="phone_icon">✆ </span>6 979 287</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </section>

Answer 1

在图片和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; }并使用flexbox居中。

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

p <- ggmap(Poland) + coord_quickmap(xlim = c(13, 25), ylim = c(48.8, 55.5), expand = F)

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>inga.brandmeister@frens.ee</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>kadri.eensalu@frens.ee</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>anedt.trumsi@frens.ee</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>maire.linke@frens.ee</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>tanel.vimm@frens.ee</p>
            <p class="phone"><span class="phone_icon">✆ </span>6 979 287</p>
          </div>
        </div>
      </td>
    </tr>
  </table>
</section>

＆＃13;

Answer 3

首先删除default margin的{{1}}顶部，然后将h1的显示更改为h1，使其与inline-block旁边的对齐。现在使用image div中的text-align中心来对齐中心卡中的图片和文字。

＆＃13;

parent

＆＃13;

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

＆＃13;

Answer 4

您可以添加align="center"属性以水平对齐td内容而无需额外的CSS。 Here is the link

HTML居中图像和卡内的h1

4 个答案: