使用CENTERED图像进行图像映射

时间:2014-04-29 11:59:34

标签: css image

我正在使用带有几个热点进行导航的图像: http://hospicehub.com/

问题是图像左对齐而不是水平居中。 我尝试了背景位置:50%0 我试过将整个东西包裹起来 我试过添加margin-left:auto;余量右:汽车;

似乎没有任何效果???

以下是代码:

<style type="text/css">
.map_image { display: block; width: 816px; height: 666px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #map_link_0 { width: 306px; height: 35px; top: 241px; left: 489px; }
.map_image #map_link_1 { width: 305px; height: 35px; top: 289px; left: 490px; }
.map_image #map_link_2 { width: 305px; height: 38px; top: 336px; left: 491px; }
.map_image #map_link_3 { width: 302px; height: 38px; top: 384px; left: 493px; }
.map_image #map_link_4 { width: 301px; height: 37px; top: 434px; left: 493px; }
.map_image #map_link_5 { width: 299px; height: 39px; top: 482px; left: 494px; }
.map_image #map_link_6 { width: 298px; height: 36px; top: 533px; left: 495px; }
.map_image #map_link_7 { width: 300px; height: 38px; top: 581px; left: 495px; }
</style>

<div class="map_image" style="background-image: url('/images/home-nav2.png');">
<a class="map_link" id="map_link_0" title="" href="/hospices"></a>
<a class="map_link" id="map_link_1" title="" href="/pbm"></a>
<a class="map_link" id="map_link_2" title="" href="/pharmacies"></a>
<a class="map_link" id="map_link_3" title="" href="/medicare-part-d"></a>
<a class="map_link" id="map_link_4" title="" href="/emr"></a>
<a class="map_link" id="map_link_5" title="" href="/dme"></a>
<a class="map_link" id="map_link_6" title="" href="/medical-supply"></a>
<a class="map_link" id="map_link_7" title="" href="/cms"></a>
</div>

0 个答案:

没有答案