0

私は以下のようなものを持っています。

<div class='sideTitle'>SideTitle</div>
<table><tr><td>r1c1</td><td>r1c2</td></tr><tr><td>r2c1</td><td>r2c2</td></tr></table>

次のCSSでサイドタイトルを左に浮かせています。

.sideTitle { float: left; }

これは、サイド タイトルが必要に応じてテーブルの左側にフロートされるという点で機能します。ただし、サイドタイトルをテーブルに対して垂直方向に中央揃えにしたいと思います。

ここで、非常によく似た問題に対処しているように見える他の回答をいくつか調べました（左側のフローティングdivを垂直方向に中央揃えすることに関するかなりの数の結果）が、この場合にそれらを機能させることができないようです。

何か案は？問題を説明する完全なサンプルを次に示します。

   <html>
   <head>
      <style type='text/css'>       
         .sideTitle {
            float: left;
         }         
      </style>
   </head>
   <body>
      <div class='sideTitle'>SideTitle</div>
      <table><tr><td>r1c1</td><td>r1c2</td></tr><tr><td>r2c1</td><td>r2c2</td></tr></table>
   </body>
</html>

ブラウザでレンダリングすると、上記がどのように見えるかを次に示します。

サンプル結果

これが私がやりたいことです。

意図した結果

編集: cimmanon と @RaphaelRafatpanah の両方の解決策は正しかったです。Raphael の方が少し一般的 (HTML 内ですぐ横に並んでいる必要はない) だったので、Raphael のものにマークを付けましたが、どちらも素晴らしいです! どちらの機能も妨げていた問題は、IE が適切にレンダリングできるように、以下を追加する必要があったことです。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
4

4 に答える 4

1

そのようなものが必要な場合は、両方の要素にdisplay: inline-blockandを使用します。vertical-align: middleテーブルでどのように機能するかわかりません。

于 2013-02-11T15:51:32.203 に答える