Javascript 中心2浮动元件
我有一个相对简单的HTML布局,其中有一个heading div,下面是一个Main div,左侧包含一个导航栏,右侧包含一个ContentDiv 我的问题是无法将我的导航栏和内容div显示在中间(水平),它们总是位于左侧(因此导航栏x位置为零)。 你知道为什么它们(导航栏和ContentDiv)坐在左边而不是中间吗Javascript 中心2浮动元件,javascript,html,css,Javascript,Html,Css,我有一个相对简单的HTML布局,其中有一个heading div,下面是一个Main div,左侧包含一个导航栏,右侧包含一个ContentDiv 我的问题是无法将我的导航栏和内容div显示在中间(水平),它们总是位于左侧(因此导航栏x位置为零)。 你知道为什么它们(导航栏和ContentDiv)坐在左边而不是中间吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { display: inline; }
#navBar { height: 700px; }
#content { height: 700px; }
/* The above code displays the navbar above the content div but both
elements are centred
*/
/* The below code gets the navbar to be displayed to the left of the
content div which is what I want but now the 2 elements are not centred
they are on the left of the screen
How do I get them centred?
*/
#navBar { float: left; height: 700px; }
#content { float: left; height: 700px; }
-->
</style>
</head>
<body>
<div id="heading">
abc
</div>
<div id="main">
<div id="navBar">
<!-- This is the background image for this element, I know, I know I shd use CSS but it doesn't resize the images that way -->
<img src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
<!-- This is the background image for this element -->
<img src="images/contentBackground.png" alt="" width="800px" height="700px"/>
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1000px"/>
</body>
</html>
Kamalei-主页
abc
试试这个:
#navBar { display: inline; height: 700px; }
#content { display: inline; height: 700px; }
#main { margin: 0 auto; }
编辑:
更新代码。我不确定这是不是你要找的东西。试试这个:
#navBar { display: inline; height: 700px; }
#content { display: inline; height: 700px; }
#main { margin: 0 auto; }
编辑:
更新代码。我不确定这是否是你想要的。最后两个css语句说float:left。这就是为什么他们在左边=) 编辑:
啊,好吧。。。。我看到右边了吗:您想要内容的导航左边,但两者都应该居中?最后两个css语句说float:left。这就是为什么他们在左边=) 编辑:
啊,好吧。。。。我看到右边了吗:你想要内容的导航左边,但两者都应该居中?谢谢,但它没有从左边移动它们-编辑:在我插入内联后,它现在可以工作了。谢谢:)你能回答吗?谢谢,但它没有把它们从左边移走-编辑:在我插入内联后,它现在可以工作了。谢谢:)你能回答吗?但我不知道它应该在哪里居中,因为没有任何东西有明确的宽度或类似的东西。或者你只是想让文本居中?顺便说一下:浮动元素应该总是有一个宽度,因为你永远不知道浏览器会做什么。但是我不知道它应该在哪里居中,因为没有任何东西有一个明确的宽度或类似的东西。或者你只是想让文本居中?顺便说一句:浮动元素应该总是有一个宽度,因为你永远不知道浏览器会做什么。