スタイルによるHTML書式設定 - テーブルをあきらめて使用するだけですか？

Question

私は歴史的に私のHTMLフォーマット用のテーブルを使用していて、私が好きなように見えるようにするためにはかなり良いと述べています。私はテーブルが "テーブルデータ"フォーマットしない。私はそれを「正しい方法」にしようとすると、私はいつも少し不満を感じるので、今日私はいくつかの助けを求めています。

<div style="width: 90%;"> 

    <div style="width: 50%; height: 75px; vertical-align: middle; float: left;"> 
    <a href="a.html" style="margin: auto 0px auto 0px"> 
     <img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" /> 
    </a> 
    <a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>       
    </div> 

    <div style="width: 50%; float: right;"> 
    <a href="b.html">B Link</a>       
    </div> 

</div> 

あなたは上記の私の試みから見ることができるように、私は、画像リンクと同じ水平線（画像の中央に、すなわちテキストリンク）に沿ってすべてのラインアップに2つのテキストリンクのためにしたいと思います。親のdivの幅に応じて、A img/linkとB linkはお互いに合理的な距離を置いてほしいです。私はまた、 "float：left"と "float：right"スタイルのdivをではなく、にすることをお勧めします。コード）。

私を真っ直ぐにしてください。後ろの大きな苦痛となるように書式を設定する「正しい方法」を見つけたのは私だけですか？私は訂正されれば私が正しい道を下って行くことができる大きなものを見逃していることを望んでいる。

===============

更新、コメントのおかげで、私はjsfiddleに行って、テーブルベースのソリューションいじっ：

   <table style="width: 90%; margin: 0px auto 0px auto;"> 
        <tr> 
         <td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td> 
         <td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td> 
        </tr> 
       </table> 

利回りを目的のレイアウト：

私はそれは私がdiv要素ベースのレイアウトをしようとすると、いつも私を刺さ山車や位置の私の誤解/使い方でなければならないと思います。

Answer 1

個人的に私はこのようにそれを行うだろう - http://jsfiddle.net/spacebeers/nWNPm/7/

.magLink { 
     list-style: none; 
     height: 50px; 
     float: left; 
     margin: 0 50px 0 0; 
} 

.magLink li { 
     float: left; 
     height: 50px; 
     display: table; 
} 

.magLink li a { 
     height: 50px; 
     display: table-cell; 
     vertical-align: middle; 
} 


<ul class="magLink"> 
    <li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li> 
    <li><a href="#">Link A</a></li> 
</ul> 

あなただけの1以上のものを持っている<ul>をコピーすることができます。右マージンを調整するだけで、どれくらいの頻度でそれらを配置することができます。私はJSFIddleのための追加のスタイリングと単一リンク、複数のリンクとリンクの例を設定しました。

EDIT：

JSFiddleのかなりひどいので、ここでそれが働いていない場合には、出力のイメージがあります実行しています。

垂直方向の配置は、CSSの本当の痛みをすることができますが、レイアウトのためのテーブルは、その日の男がありました。彼らが日々平和な表のデータのために使用されて生きることができます。

Answer 2

あなたの「フローター」は、90％の内側に2つの50％の幅があるため、親divを超えています。それらを両方とも45％に設定してみてください。 は、次に（IMGとのリンクが限定され、あなたの2つのフローターコンテナにclassまたはidを設定position:relativeにそれらを設定し、position:absoluteに各浮動div以内にあなたのリンクとIMGの両方を設定し、所定の場所にそれらを移動するleft, right, top,とbottomを使用します比較的に位置する親にdiv）。これは役に立ちますか？あなたのテーブルのレイアウトにコードと同等です

編集

<div style="width: 90%;"> 

<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;"> 
<a href="a.html" style="margin: auto 0px auto 0px;"> 
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" /> 
</a> 
<a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>       
</div> 

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;"> 
<a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a> 
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />       
</div> 

</div> 

。 私はjsfiddleを使用していましたが、私は504エラーがありました...おそらく私の口が右ではありませんでした。 :)