Question

我基本上有一个描绘图表的方形图像，我想要做的是能够在12,3,6和9点位置放置图表所代表的url链接描述。

所有图像都位于图像的顶部，中间左侧和右侧以及底部。

顶部和底部的网址描述链接应该没问题，但我不确定如何将文字放在图像的左侧和右侧。

Answer 1

只需使用绝对定位将元素放置在您需要的位置。创建一个相对定位的div。将图像设置为背景，并将所有元素放在该div中，并使用绝对定位。希望有所帮助！

Answer 2

最简单的方法可能是使用表，但我使用了列表和嵌套列表。在jsbin发布了一个演示，使用以下代码：

<!DOCTYPE html>

<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />

  <style type="text/css" media="all">

  ul  {
    text-align: center;
    }

  ul li  {
    line-height: 1.2em;
    }

  ul li ul
    {
    }

  ul li ul li
    {
    display: inline-block;
    vertical-align: middle;
    }

  ul li ul li img
    {
    margin: 0;
    padding: 0;
    }

  </style>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <script type="text/javascript">

  </script>
</head>

<body>

  <div id="wrap">

    <ul>
      <li><a href="#linkOne">top link text</a></li>
      <li>
        <ul>
          <li><a href="#linkTwo">left link text</a></li>
          <li><img src="http://image.bayimg.com/jaccdaabo.jpg" /></li>
          <li><a href="#linkThree">right link text</a></li>
        </ul>
      </li>
      <li><a href="#linkFour">bottom link text</a></li>
    </ul>

  </div>

</body>

</html>

围绕方形图像居中文本

2 个答案: