錨點標記在點擊後不居中

-1

我正在創建一個通過使用錨點向下滾動到不同div的網站。但是，當我點擊一個鏈接時，錨定的div不會集中在頁面上。我確定了我的div，但我不知道這是否會影響它？任何人都有任何線索如何讓錨定使用div居中？請幫忙！錨點標記在點擊後不居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Jean and James</title> 

<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.anchor.js" type="text/javascript"></script> 

<link href="jj_css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="navigation" align="center"> 
<a href="#jeanandjames" class="anchorLink">JEAN AND JAMES</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a href="#feature" class="anchorLink">FEATURE PRODUCT</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a href="#contact" class="anchorLink">CONTACT</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<a href="#work" class="anchorLink">WORK</a> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
</div> 

<div id="logo"> 
<img src="logo.gif" /> 
</div> 

<a name="jeanandjames" id="jeanandjames"> 
<div id="jeanandjames" align="center"> 
<img src="jeanandjames.jpg" /><br /> 
A boutique design firm specializing in hand crafted products and graphic print work. 
</div> 
</a> 

<a name="feature" id="feature"> 
<div id="feature"> 
<img src="baby_bowtie.gif" /> 
</div> 
</a> 

<a name="contact" id="contact"> 
<div id="contact"> 
Jean & James 
Chicago, IL<br /><br /> 

Donec faucibus nunc eget quam pretium vel porttitor diam venenatis. Nullam egestas, quam et congue rutrum, diam mauris tempus urna, eget mattis quam quam ac erat. Vivamus lobortis nunc quis arcu lobortis vel euismod felis tincidunt. Etiam facilisis, metus et mattis tempor, erat ipsum tincidunt diam, nec aliquam velit risus a lacus. Duis tempor bibendum felis, adipiscing mattis lorem eleifend fermentum. Nulla adipiscing consequat enim id sagittis. Suspendisse venenatis scelerisque orci, sed sollicitudin erat egestas in. Nunc orci leo, adipiscing vel consectetur sit amet, rutrum vitae nulla. Mauris ut mi nunc, non condimentum risus. Donec varius consequat quam vel lacinia. Etiam et eros nec quam egestas pellentesque sit amet ac nunc. 
</div> 
</a> 


</body> 
</html>

這裏是我的CSS：

#navigation A:link {text-decoration: none; color: #FFFFFF;} 
#navigation A:visited {text-decoration: none; color: #FFFFFF;} 
#navigation A:active {text-decoration: none; color: #FFFFFF;} 
#navigation A:hover {text-decoration: none; color: #CC9;} 

#navigation { 
    position: fixed; 
    top: -1px; 
    left: -1px; 
    width: 100%; 
    height: 20px; 
    padding: 10px; 
    z-index: 10; 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    background-color: #000; 
    color: #FFF; 
} 

#logo { 
    position: fixed; 
    top: 150px; 
    left: 50px; 
} 

#jeanandjames { 
    position: absolute; 
    top: 230px; 
    left: 200px; 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 

#feature { 
    position: absolute; 
    top: 600px; 
    left: 200px; 
} 

#contact { 
    position: absolute; 
    top: 1200px; 
    left: 200px; 
    width: 500px; 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
}

來源

2011-11-13 jennyjune

嘗試刪除您的包裹內容的div元素。

來源

2011-11-13 01:47:28 vinilios

我不打算很殘酷，但標記和CSS都不好，問題幾乎和「我如何以CSS爲中心？」一樣基本。這不是插件，它爲你打破了一切，它只是你的標記和CSS。讓我們來解決幾個問題：

所有這些 實體不是正確的方法來隔開您的導航。 CSS用於這個。
您在div上使用align =「center」，這違背了CSS的目的
您的錨上有一個名爲「anchorLink」的類，它是對這些類型鏈接進行風格化的理想方式，但它們沒有風格。
作爲一個新手，你可以原諒不知道這一點，但創建一個「小提琴」（jsfiddle.net上的免費服務）或另一個託管示例被認爲是很好的形式，以便人們可以修補而不是僅僅分析代碼。
你正在用div標籤封裝div。我真的不記得這是不正確的標記還是簡單地認爲是不好的做法。

這裏的標記和CSS的小提琴（有沒有需要包括插件，以解決您的問題，所以我沒有打擾包括它）：

http://jsfiddle.net/85Tp5/

所以，這就是講道。

我非常願意並樂於冒着被拒絕提供實際答案的風險，因爲我認爲我在這裏的評論是有價值的，而且它太適合實際的「評論」。其他那些低估了這個問題的人與我的位置相同，但沒有精力來寫出我們所有人的想法。

如果你真的想得到一些真正的幫助，使用小提琴創建一個示例，將無需您的圖像工作。不要擔心滾動插件（它會直接跳到你的錨，這在這一點上不是你的問題）。一旦你成型了，你可能會回答你自己的問題。但是，如果沒有，人們將能夠更好地幫助你。

一切順利！

來源

2011-11-13 01:54:55

錨點標記在點擊後不居中

回答

相關問題