Question

样式表有点新鲜。我的网站内容有一个div。我通过使用margin-right属性将我的h1对齐到该div的中间。但是，当我在同一个div中的p标签上使用margin-right属性时，它也会影响h1并进一步向左移动。我想我不应该使用margin-right，但是最好的方法是什么？

如果我的问题不清楚，请告诉我。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

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

<title>
Putnam County Family Support Services - Resources
</title>

</head>

<body>

<div id="container">

    <div id ="top">

    <center><img src="images/logo1.jpg" alt="logo" /></center>


    </div>


    <div id="navigation">

        <ul>

        <li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';"> 
        <img src="images/home_nav.jpg" name="MyImage4"></a> </li>

        <li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';"> 
        <img src="images/services_nav.jpg" name="MyImage3"></a> </li>

        <li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';"> 
        <img src="images/resources_nav.jpg" name="MyImage2"></a> </li>

        <li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';"> 
        <img src="images/staff_nav.jpg" name="MyImage1"></a> </li>

        <li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';"> 
        <img src="images/contact_nav.jpg" name="MyImage"></a> </li> 

        </ul>


    </div>

    <di id="content">

    <h1>Contact</h1>

    <p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>

    <p>Phone number:</p>


    </div>


    <div id ="footer">



    </div>

</div>



</body>
</html>

CSS：

body {
background: #f3f6f3;
text-align: center;
}

#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}

#top {
padding-bottom: 25px;
}

#navigation {
float:left;
position: absolute;
}

#navigation ul {
list-style: none;
padding-top: 20px;
}

#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}

#content {
float: right;
border: 1px;
}

#content h1 {
margin-right: 175px;
}

#content p {
margin-right: 170px;
}


#footer {
clear: both;
font-size: 12px;
}

Answer 1

尝试使用百分比而不是绝对值来放置项目，使内联块元素居中（如果设置了元素宽度），您可以使用：margin-right : auto; margin-left: auto;

要使H1居中，您应该使用以下属性：

  #content h1 {
text-align: center;
}

#content p {
text-align: left;
}

这会使您的文字居中，看看here

如果我也可以查看你的HTML，那将非常方便。

CSS对齐麻烦！

1 个答案: