两列div布局，右列/ div中的内容未正确居中

时间：2015-06-12 19:32:45

标签： html css

我在使用两列div格式

让我的布局正常运行时失败了

有一个内容包装器，左侧是导航菜单，右侧是主要内容。

由于某种原因，主要内容基于内容包装器而不是以其自己的宽度为中心。我不确定如何让主要内容集中在其中。

HTML：

<body>
<div id="wrapper">

<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header"></div>
<!-- END HEADER -->
<!-- #EndLibraryItem -->

<div class="clear"></div>

<div id="content-wrapper">

<!-- #BeginLibraryItem "/Library/navigation.lbi" -->
<div id="navigation">
    <p class="Home-Page-L_Panel"><a href="http://www.twitter.com/kosherCruises"><img src="http://twitter-badges.s3.amazonaws.com/follow_bird_us-b.png" alt="Follow kosherCruises on Twitter"></a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Passover10">Passover</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#KCruises">Kosher Cruises</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Sukkot">Sukkot</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#GKTours">Kosher Tours</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#JHTours">Heritage Tours</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="links/Interesting-Links.htm">Links</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="Contact.htm">Contact Us</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="index.htm">Home</a></p>
    <p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Candle">Candle Lighting</a></p>

    <div><img src="OTBGifs/el_al_whitebkgrd-100W.jpg" alt="El Al It's not just an  airline. It's Israel." width="100" height="24" border="0"></div>

    <div align="left"><a href="http://www.travelex-insurance.com/index.asp?location=05-0686&go=bp;"><img src="Travelex_Images/Linking Graphic_small.GIF" alt="Travelex Insurance" width="100" height="66" border="0"></a></div>


    <p>Time in Jerusalem</p>
    <div align="left">
                <iframe src="http://free.timeanddate.com/clock/i1q3n65d/n676/fn5/tcddd/ahl/bas5/bat6/baceee/pa2" frameborder="0" width="103" height="33"></iframe>
    </div>
    <div><img src="http://www.judaicawebstore.com/AffiliatePro/scripts/imp.php?a_aid=5547af81c16e2&amp;a_bid=3d5614ac" width="1" height="1" alt="" /></div>
    <object width="120" height="600">
        <param name="movie" value="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac">
        <param name="menu" value="false"/>
        <param name="quality" value="medium"/>
        <param name="wmode" value="Opaque"/>
        <embed src="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac" width="120" height="600" loop="false" menu="false" swliveconnect="FALSE" wmode="Opaque" allowscriptaccess="always">
    </object>                   
</div>
<!-- END NAVIGATION -->
<!-- #EndLibraryItem -->

<div id="main-content">

<h1>The Site for Kosher Travel</h1>




</div><!-- END MAIN-CONTENT -->

</div><!-- END CONTENT-WRAPPER -->


<!-- <div class="clear"></div> -->
<div id="footer">
</div><!-- END FOOTER -->


</div><!-- END WRAPPER -->
</body>

样式：

/* CSS Document */
body {
    background-image:url(OTBGifs/116a8b.GIF);
}

/* unvisited link */
a:link {
    color: #000099;
}

/* visited link */
a:visited {
    color: #000099;
}

/* mouse over link */
a:hover {
}

/* selected link */
a:active {
    color: #0000FF;
}

h1, h2, h3, h4, h5, h6, p
{
    font-family: Times New Roman, Times, serif;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 16px;
}

p {
    font-size: 16px;

}

#wrapper {
    width: 740px;
    margin-left: auto;
    margin-right: auto;
    background-color:#848484;
}

#navigation {
    width: 132px; 
    display: inline-block;
    margin-top: 0px;
    vertical-align: top;
    background-color: #ffffff;
}

.clear {
    clear: both;
    margin:0px;
}

.Home-Page-L_Panel
{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-weight: bold;
    font-style: italic;
}

a.Home-Page-L_Panel
{
    text-decoration: none;
}

#header {
    width: 100%;
    height: 113px;
    background-color: #6699FF;
}

#main-content {
    vertical-align: top;
    margin-left: 132px;
    display: inline-block;

}

#content-wrapper {
    margin-top: 0px;
}

任何帮助都将不胜感激。

当前布局的图片显示＆＃34; The Kosher Travel＆＃34;在其div中没有​​正确居中：

Image of current layout showing how the "The Site for Kosher Travel" is not properly centered within its div

5 个答案:

答案 0 :(得分：0)

我建议在#main-content中使用text-align：center。我只在你的h1中看到它。

答案 1 :(得分：0)

我假设您希望左侧导航栏宽度使用132像素，主要内容导航栏使用剩余的屏幕宽度。您需要将导航容器浮动到左侧，然后对于主内容div，将其设置为display: block并将其left-margin设置为等于左侧导航的宽度：

#navigation {
  width: 132px; 
  display: inline-block;
  margin-top: 0px;
  vertical-align: top;
  float: left;    <----------- here
}

#main-content {
  vertical-align: top;
  display: block;     <------- here
  margin-left: 132px  <------- and here, increase this to add space between the two columns
}

为了确保#content-wrapper之后的任何内容呈现在整个内容之下，请在CSS中添加一个clearfix：

#content-wrapper:after {
  content: "";
  display: block;
  clear: both;
}

实施例： https://jsfiddle.net/bcoom7rn/1/

答案 2 :(得分：0)

实际上，h1并非基于#content-wrapper居中。只是你的容器大小使它像SEEM一样位于#content-wrapper的中心。

将这些样式应用于#main-content：

right: 132px;
left: 0;
top: 0;
bottom: 0;
position: absolute;

将这些样式应用于#content-wrapper：

position: relative;

从#main-content

中删除这些样式 
margin-left: 132px;

希望有所帮助！

答案 3 :(得分：0)

我看到了您的完整代码，并且发现您编写布局的方式几乎没有根本问题。

你可以做的事情：

  1. 将width用于#main-content
  2. 使用浮动布局

    3. 1更新#main-content

    的CSS 
    #main-content {
    vertical-align: top;
    display: inline-block;
    width:604px;
}

    注意，我已经删除了margin-left。见这里：http://jsfiddle.net/tg68m6mp/

    2使用浮动布局。 （好，老路）

    在#navigation和#main-content上使用float，也给出宽度并使用你已经拥有的clearfix div。见这里：http://jsfiddle.net/56bnk5s4/

答案 4 :(得分：0)

试试这个...... 

#main-content { width: calc(100% - 136px);margin-left: auto; };
h1 { text-align: center;  }  /* this h1 is inside main-content div*/
相关问题
最新问题