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/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周りdivを作成し、中央にフレキシボックスを使用します。

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

Answer 2

あなたがする必要があるのは.nameと.profile_picにdisplay: inline-blockを追加している - 彼らはつもりです。この方法は、1行になります。 text-align: centerを.cardに追加すると、コンテンツが水平に中央に表示されます。 また、vertical-align: middle〜.profile_picと.nameを追加しましたので、インラインで垂直にセンタリングされています。

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

1次imageにそれを位置合わせするinline-blockにh1の表示を変更し、その後、h1のdefault margin上部を除去します。 parent divにtext-alignの中心を使用して、センターカードの画像とテキストを揃えます。

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

あなたは水平に、追加のCSSなしtdコンテンツの整列にalign="center"属性を追加することができます。 Here is the link