Центр содержимого и оверлея FIGURE-MAP-SVG - PullRequest
Новая
       12

Центр содержимого и оверлея FIGURE-MAP-SVG

0 голосов
/ 21 июня 2019

Мне не удается отцентрировать карту и рисунок и наложить два слоя. Я немного запутался с положением: относительным и положением: абсолютным. 

 HTML
<div style="text-align:center">
<p>Hello World!</p>

<figure id="mapa">
<img src="mapa.png" width="500" height="500" usemap="#map"/>
<svg width="500" height="500">
    <line x1="10" y1="100" x2="60" y2="100" stroke="red"/>
    <line x1="60" y1="100" x2="200" y2="300" stroke="red"/>
<line x1="200" y1="300" x2="400" y2="400" stroke="red"/>
</svg>
</figure>
</div>

CSS
<style>
figure{
position:relative;
}
img{
position:absolute;
}
svg{
position:absolute;
}
</style>

Вот скрипка:

https://jsfiddle.net/z3qf8u2e/

1 Ответ

0 голосов
/ 21 июня 2019

просто используйте margin : 0 auto вместо https://jsfiddle.net/1zhdrvje/

...