CSS タグをブロックに設定した後、テキストを垂直方向に中央揃えにする方法_html/css_WEB-ITnose

ああ、古い質問のようですが、中心に置くことができません。

行の高さと同じ高さを使用してvertical-alignを試しましたが、うまくいきませんでした。

    <table class="tbMain">        <tr>           <td style="border-top: 1px solid #ccc;">             <a  href="#" onclick="openPage(1,this)">                <img src="App_Themes/Default/Images/08.png" /><br />                   免责声明 </a></td>             <td style="border-top: 1px solid #ccc;">              <a href="#" onclick="openPage(2,this)">                   <img src="App_Themes/Default/Images/08.png" /><br />                     个人信息</a></td>             <td style="border-top: 1px solid #ccc;">                  <a href="#" onclick="openPage(3,this)">                    <img src="App_Themes/Default/Images/08.png" /><br />                      密码修改</a></td>        </tr></table>

    <style>.tbMain    {     overflow: hidden;    text-align: center;   text-shadow: 0 1px 0 #fff;    width: 100%;     font-size: 0.8em; } .tbMain td     {  border-bottom: 1px solid #ccc;  width: 33%;  border-right: 1px solid #ccc;overflow: hidden; background-color: #eee; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);  background-image: linear-gradient(#fff, #f1f1f1);  cursor:pointer;  } .tbMain td:hover { background-image: linear-gradient(#67A2CD, #DBEAF9);  }   .tbMain a  {  display:block;width:100%; height:100%; line-height:100%;    /*vertical-align:middle;*/   }  .tbMain a:hover  { font-weight: bolder; color: #fff;text-decoration: none;   }  .tbMain a:link  {color: #808080;  text-decoration: none;    }            </style>

その後、height:100% に何か問題があると思い、初期化時に css の line-height と height の値を特定の値に動的に変更しました。タグが非常に高い位置に引かれました。

ディスカッション (解決策) への返信

に画像がある場合、当然垂直方向の中央には配置されません

では、当然垂直方向の中央に配置されません

では、ここで画像を背景として使用できますか?

いいえ、私は .tbMain を使用します

}テストしてください
画像を削除しましたが、結果はまだ中央に配置されていません ああ

テキストを下に移動するには、padding_top:10px; を使用します。次に、この div の高さをより小さいポイントに設定します。

display:block を設定する必要はありません

display:block を設定する必要はありません

block を設定しない場合、a タグには幅と高さがありませんが、私の TD は非常に大きいです、a は少しだけ、my open 関数は jq mobile のオープニングメソッドであるため、a の href リンクを使用してリダイレクトする必要があります。イベントを td に結び付けることはできません

このように携帯電話に配置すると、ほとんどのユーザーは td をクリックしますが、a をクリックすることを誰も気にしないので、a のクリックイベントはトリガーできません

さて、ほんとにそうなんです 背景が上がっててめんどくさい
aがそれほど大きくなくても、TDに時間を追加することはできます。aがどれほど大きくても、ユーザーは実際にtdを操作します。

とは何の関係もありません

スタイルを渡すとき 処理できないときは、気が変わってイベントを親に追加するか、親を変更することができます。スタイルは表示の参照としてのみ使用され、スタイルを決定することはできません。エンドユーザーの実際の操作ですよね？