圍繞廣場圖像居中文字

希望有人能夠協助。圍繞廣場圖像居中文字

我基本上有一個正方形的圖像，描繪一個圖表，我想要做的就是能夠放置圖表代表12，3，6和9點鐘位置的圖表鏈接描述。

所有圖片的頂部，中間左側和右側以及底部居中。

頂部和底部的URL描述鏈接應該沒問題，但我不確定如何將我的文本居中放在圖像的左側和右側。

希望這是有道理的。

謝謝。

來源

2010-08-31 tonyf

我不明白這一點 - 是與背景圖像元素的所有文字描述的父元素？也許你可以發佈你的代碼，這樣就可以輕鬆解決問題 – bogatyrjov 2010-08-31 16:38:58

嗨。圖像僅僅是一個背景圖片，以頁面爲中心。基於此圖片，我現在想要在背景圖片的外部邊框周圍放置文字 – tonyf 2010-08-31 23:16:20

只需使用絕對定位將元素放置在需要它們的位置。創建一個相對定位的div。將圖像設置爲背景，並將所有元素放置在該div內並進行絕對定位。希望有所幫助！

來源

2010-08-31 16:51:46 Michael

最簡單的方法很可能使用表格，但我使用了列表和嵌套列表。有一個演示張貼在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>

來源

2010-08-31 17:04:42

圍繞廣場圖像居中文字

回答

相關問題