定位/間距/居中表數據

我遇到問題正確對中。我相信整個桌子會左移一點，但我真正注意到的是圖標。他們應該恰到好處。我可以添加保證金來將它滑過一點點，但我正在尋找精確的東西。它困擾我不知道我有多少像素。有人能夠告訴我我的問題在這裏嗎？而對於這個記錄，我對編碼是一個不可思議的新手，並且我不太確定當我開始這個時候我的方向是什麼。我相信在CSS代碼中有冗餘/低效率。這是一個小提琴。定位/間距/居中表數據

https://jsfiddle.net/smatchymo/rdxh9hd4/8/

而這裏的代碼。

<body> 
    <div id='filter'></div> 
    <div id='watchface'></div> 
    <div id='text'> 
    <table> 
     <tr> 
     <td class='times'>4:00</td> 
     <td id='icon' class='icons'></td> 
     <td class='hourTemp'>69</td> 
     </tr> 
     <tr> 
     <td class='times'>5:00</td> 
     <td id='icon1' class='icons'></td> 
     <td class='hourTemp'>67</td> 
     </tr> 
    </table> 
    </div> 
    <div id='timecapsule'> 
    <div id='permatime'></div> 
    <div id='time'>12:00</div> 
    </div> 
</body>

這裏的CSS：提前

body { 
    height: 100%; 
    width: 100%; 
} 

#watchface { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 360px; 
    width: 360px; 
    position: absolute; 
    border-radius: 100%; 
    //background-color: black; 
    z-index: 0; 
} 

#timecapsule { 
    height: 360px; 
    width: 360px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    border-radius: 100%; 
    z-index: 30; 
    overflow: hidden; 
} 

#permatime { 
    position: absolute; 
    top: -45px; 
    left: 105px; 
    height: 100px; 
    width: 150px; 
    border-radius: 5px; 
    //border: 1px solid white; 
    background-color: black; 
    opacity: .7; 
    color: white; 
    text-align: center; 
    z-index: 40; 
} 

#time { 
    font-size: 30px; 
    color: white; 
    position: absolute; 
    top: 10px; 
    left: 105px; 
    width: 150px; 
    text-align: center; 
    z-index: 41; 
} 


#filter { 
    position: absolute; 
    height: 360px; 
    width: 360px; 
    top: 0px; 
    left: 0px; 
    background-color: black; 
    border-radius: 100%; 
    opacity: .7; 
    z-index: 2; 
} 

#text { 
    list-style-type: none; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 360px; 
    height: 360px; 
    font-size: 16px; 
    color: white; 
    z-index: 3; 
    //overflow: auto; 
} 

.icons { 
    height: 37px; 
    width: 112px; 
    // border: 1px solid yellow; 
} 

#icon { 
    background: url("https://icons.wxug.com/i/c/v4/chancetstorms.svg") no-repeat center; 
} 

#icon1 { 
    background: url("https://icons.wxug.com/i/c/v4/flurries.svg") no-repeat center; 
} 

.hourTemp { 
    font-size: 24px; 
    text-align: right; 
    width: 74px; 
    margin-right: 40px; 
} 

.times { 
    font-size: 24px; 
    margin-left: 40px; 
    text-align: left; 
    //border: 1px solid lime; 
    width: 74px; 
} 

table { 
    padding: 75px 0px 0px 0px; 
    margin; 0px; 
    width: 360px; 
    text-align: left; 
    list-style-type: none; 
    font-size: 32px; 
} 

td { 
    margin: 0px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
}

謝謝！

來源

2017-04-09 B.Minor

Bahhh，我發誓我仔細檢查了我的數學......我正要對我的文章進行編輯，將表格數據和填充的像素大小加起來，以便讓任何人嘗試幫助的時候更容易和更清晰，但我意識到一切都不會增加到360像素，因爲它應該。我的圖標類寬度是10px太小...

來源

2017-04-09 03:45:11

定位/間距/居中表數據

回答

相關問題