2014-04-25 31 views
0

我在包含圖標和一大塊文本的表中有一列。該圖標是一個具有數據網址背景的div。我需要單元格比內容和要在單元格中居中的內容稍大一些。我一直在嘲弄我的頭腦一段時間,但無法實現。HTML和CSS,中心div在td

CSS

body { 
    width: 90%%; 
    margin-left: auto; 
    margin-right: auto; 
    font-size: 100%; 
    font-family: "Arial" 
} 

table { 
    /*width: 100%%;*/ 
     width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    font-size: 100%; 
    border-collapse: collapse; 
} 

td.bordered_centered { 
    border: solid 1px; 
    text-align: center; 
    padding-left: 5px; 
    padding-right: 5px; 
    vertical-align: middle; 
} 

.icon { 
    float: left; 
    height: 20px; 
    width: 35px; 
    margin-right: 0.25em; /* 0.25em is roughly equal to one space character. */ 
} 

.lastFour { 
    float: left; 
    width: 35px; 
    padding-top: 2px; 
} 

.visa { 
    background-image:   
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAYAAAAHpoRMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABWZJREFUeNrElmlsVFUYhp87SztD95VSoDNdWVILWkBokBr4UbBuGAUUJERiYoLGjR8GI4kJiCAI7sEQ0j/8MRq3IkShAYpSEFp2JNBl2kJLp9NlOrcz05m51+9OcIEiJSbimZyZb86dc+Y97/t97znK8ePH44G90mdKN3P3mya9Sfpsi7z9NGrUqJkOhwP5vOtI/H6/yeVyFaiqWmeS7zNyc3P/FyBGs9vtFBUVGaHTYMZks9miD1rbe/i+xsWuL5tIibPy7LJJLKkspKc/wEfb66mubmTFyhLmz81hw6ZfaXL1s/7t2WRl2Nn80Sn2H+7AF4iQbrPySGUOz6+YTE52Irqus2l7A3uqWwgGw8yrcLDiqQkUOJKj/2symVAUBdPfUeaMS2XubAeNzT727W7nYstAdHzf4Sus31RP99UAxcWZnL/sZeeOC6ieMBGzwqaPT/Lp5gYyk2wsrHASDIQ5/Vs3qj8cnV/X0MHWT87w87Fu6g66OVzXzbWuwDCWTDcPOMcmUv7AeBS7FbstFt9giKqq80R6Q6x4aRrlpWOoPdSBHtB4+LF80tNiOXWkK5qGFZVOtq0ro/qbSj54t5yJeamEIzqf7TiPtyfAouX5JE+SehGmBoXBEcFEIhoZybES6Az4AtQcbGXPt40Ul41l8RP5tHaq1IiUZruZgslp5I9JomhqOpZYE1s3nuCtjUexx1pwZicI9VBztJ09P7iYIr95bvEEUs1mVG8Qt8c/MhiLxUxmegxhdI6cdPPh9jNYrWaWiv4Txydy4nQXFy/0UFCYTF5uIlbRe83r97F0VQlhNcSGNUd49c1DdLhVhsIaVTvP0d3pZ/nTE6NMGZmh+kJ0dPmGgbEMG5AcyEi3EREwv4jG/i6VuQscLHs8VyjXOHK0E587yIyFBRTlJtHXP4QjK5GqLQ+yrTSDtS/X8sWuRlYuvwfd0suB2mvGDrlwsYe2di+egSCpFhsdnsDIYEzCbaZUB/4Q/mYvKdk2qaoJZKfFca6xl9oDrUK/xvSybLrcg2x5v4HExBieWVKIWTf8S2dcTgLu/kG+/uoyHe0qGXkJ7P3RRZ8w1+cJopt0GqUSRwRj6Jw92k5yqgCSqpi/YDxPVuRGnzW5eqX3MGlqCvdPy6Sp1ct3uxu5JqA/rzpLOKhhF5lfeW0Knr4AtfvbyXLYeWN1CROdybS5/byzpR6PyOb1Dt0JGEXoT2HtulmYQhpzZmURb4+R/erkjIln1YvTxTuSKJGc8arxbH6vnJOnumnrDGCzWpgzJ5tFj+ZRf9bLC6vtFE9O4qHyTMS2oi0pIYUrHYNkZcYMA6PI2aSXlpbekVsagGSKvIa3cPSJcbiJVJoPTQuimDXZXAhxOvSwEcveDYM1GW5voPvL9evr64czc7t2Mww96EEZEo8Z6sUSvip51ggDbnS1F5PmiYJiSIBEItHZutku/hUnZ0AGxOVB4ZrbyzTiETtwCdQm+Z/LaD3HYVA8xy8Agn1CjyoIhQFNiZqgokmsi0noIYlDBrVISEQU0tPGY/03YPRgN5H+c7Ljy9BzQhhoQwkPosQkQEIBSnqZsJ4mpZwo0kjim2RZRSxMC6NF/MKMTxgUpgKd4G2BUC9K/NiRE/gGN1Zd6MKA7r2E5r8q62uYk4ph7EKRXRaLTZMV4mXchq6Yr0t5c55dl1go0TWpoNAAmgBTFPMtwWiBQODPk9uYHhnqQ1Pb0P0uQTSIKS4Hy+h5AmC0ZGjcLRdS/jHP/giswpo1Ot9sy7pRepHTONkNMMeam5tnOp3O6N3CmG6OSYl2Ukr+8/uMEEFLS4sRtivXr50HpN97q7PqLl07DTRlvwswANn8NfEnziBGAAAAAElFTkSuQmCC); 
    background-repeat: no-repeat; 
} 

td,th { 
    font-size: 95%; 
} 

HTML

<td class='bordered_centered cardNumber' valign='center'> 
    <div class='cardHolder'> 
    <div class='icon visa'></div> 
    <div class='lastFour'>9999</div> 
    </div> 
</td> 

我可以把它看的權利在某些屏幕,並使用填充到文本居中的一些決議,但我不能讓它看起來不錯無處不在。這是要在手機和平​​板電腦上查看,所以我不能忽略一些屏幕尺寸。

我也試過用數據uri使用img。這有一點幫助。不幸的是,它會使我想要構建的頁面變得怪異,所以我想盡可能避免它。

任何幫助,將不勝感激,謝謝。

回答