Centering Text around a Square Image_问答_开发者

开发者 https://www.devze.com 2023-01-14 02:02 出处：网络

I basically have a square image depicting a diagram and what I would like to do is to be able to place url link descriptions of what the diagram represents at 12, 3, 6 and 9 o\'clock positions.

相关专题：css

I basically have a square image depicting a diagram and what I would like to do is to be able to place url link descriptions of what the diagram represents at 12, 3, 6 and 9 o'clock positions.

All centered along the top, middle left and right of image as well as bottom.

Top and botto开发者_运维问答m url description links should be ok but I am unsure how to center my text on both the left and right hand side of the image.

Just use absolute positioning to place elements where you need them to be. Create a relatively positioned div. Set up image as a background for it and place all the elements within that div with absolute positioning. Hope that helps!

The easiest approach is likely to use tables, but I've used a list and nested-list. There's a demo posted at jsbin, using the code below:

<!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>