个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 17:29:51 25 4
gpt4 key购买 nike

我在让我的布局在两列 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;
}

如有任何帮助，我们将不胜感激。

当前布局的图像显示“The Site for Kosher Travel”如何未在其 div 中正确居中:

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

最佳答案

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

关于html - 两列 div 布局，右列/div 中的内容未正确居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30810862/

25 4 0
文章推荐： ruby - 更智能的深度哈希初始化方法
文章推荐： python - Beautiful Soup - 如何清理提取数据？
文章推荐： ruby-on-rails - 使用基本身份验证从 url 下载文件的 ruby​​ 代码
文章推荐： ruby-on-rails - FactoryGirl 电子邮件已被占用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com