gpt4 book ai didi

javascript - 中心 2 float 元素

转载 作者:太空宇宙 更新时间:2023-11-04 00:27:02 26 4
gpt4 key购买 nike

我有一个相对简单的 HTML 布局,其中有一个标题 div,然后在其下方是一个 Main div,它在左侧包含一个 NavBar,在右侧包含一个 ContentDiv。

我的问题是我无法让我的 NavBar 和 ContentDiv 显示在中心(水平),它们总是位于左侧(因此 NavBars x 位置为零)。

您知道为什么它们(NavBar 和 ContentDiv)位于左侧而不是居中吗?

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

最佳答案

试试这个:

#navBar         { display: inline; height: 700px; }
#content { display: inline; height: 700px; }
#main { margin: 0 auto; }

编辑:

更新代码。我不确定这是否是您要查找的内容。

关于javascript - 中心 2 float 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6235266/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com