2015-11-25 63 views
0

假設您在HTML文檔中具有任意寬度和高度的JPEG圖像,並且要將文字「North」,「South」,「East」和「西方「在像指南針上的圖像。將文本置於「指南針」位置上的任何圖像

僞代碼來解釋的位置:

  • 北:X = image.width/2,Y =保證金
  • 南:X = image.width/2,Y = image.height利潤
  • 東:Y = image.height/2,X = image.width利潤
  • 西:Y = image.height/2,X =保證金

你如何做到這一點不使用一個ny JavaScript,只有CSS。也就是說,NSEW標籤始終處於所有圖像尺寸的預期位置。

+0

請在下一次表現出一定的HTML,什麼你目前有/曾嘗試CSS! –

回答

0

這是使用絕對定位在標籤上相當直接。然後,您可以根據需要應用每個標籤的頂部/右側/底部/左側定位屬性。只要我們可以定義標籤的尺寸,就可以很容易地完成它們的定位。在這個例子中,每個標籤都是20像素×20像素,所以我只是調整每個標籤的邊距,使它們完美定位。

您可以隨意調整圖像尺寸,標籤始終正確顯示。

.north-label { 
    top:0; 
    left:50%; 
    margin-left:-10px; 
} 
.south-label { 
    bottom:0; 
    left:50%; 
    margin-left:-10px; 
} 
.east-label { 
    right:0; 
    top:50%; 
    margin-top:-10px; 
} 
.west-label { 
    left:0; 
    top:50%; 
    margin-top:-10px; 
} 

在「保證金」的條款,你在你的問題的psudeo代碼所概述的,只是添加到位的0用於頂/右/下/左。所以如果你想N從邊緣變成10px,改頂:0;頂部:10px;

https://jsfiddle.net/partypete25/xz0ojfft/

+0

'顯示:塊;'和'vertical-align:middle;'對絕對定位的元素? https://jsfiddle.net/xz0ojfft/5/ –

+0

公平的電話@ RokoC.Buljan顯然顯示:塊不是必需的。我不知道垂直對齊沒有效果。歡呼聲 – partypete25

+0

這很好!但是:無論如何自動將所有四個文本居中放置在一個錨點周圍(如果例如增加字體大小,它們會擴展爲兩種尺寸)。現在他們似乎左對齊,無論我做什麼,我發現自己必須手動調整頁邊距以達到像素完美,以獲得正確的位置(當更改/翻譯NSEW字時將失敗)。據我所知,text-align和vertical-align似乎對最終結果沒有任何作用。 – forthrin