1

我是 CSS 新手，所以请用简单的术语解释一下。我希望 3 个彼此大小相同的 div 彼此相邻，每个 div 中的内容居中。我拥有的是一个带有旋转图像的中心 div，我的左右 div 分别包含 3 个链接。我已经尝试了从设置每个 div 的宽度到左右浮动和居中居中的所有方法。我在这个网站上查看了类似这个问题的其他一些问题，但我不明白任何答案。如果有帮助，我会为我的 div 使用以下名称：

左上角导航

顶部中心

toprightnav

代码：

<div id="top">
  <div id="topleftnav">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
    </ul>
  </div>
  <div id="centerright">
   <div id="topcenter">
       <layer id="placeholderlayer"></layer><div id="placeholderdiv"><a href="link.htm"><img alt="image2 (9K)" src="images/image2.jpg" border="0"></a></div>
   </div>
   <div id="toprightnav">
     <ul>
       <li><a href="resources.html">Resources</a></li>
       <li><a href="contact.html">Contact</a></li>
       <li><a href="events.html">Events</a></li>
     </ul>
   </div>
 </div>
</div>
4

5 回答 5

1

CSS

#1 { width: 33%; display: inline text-align: center; '#2 { 宽度：33%; 显示：内联文本对齐：居中； '#3 { width: 33%; display: inline text-align: center;

于 2013-09-28T18:58:08.730 回答
1 
<style>
.yourDivStyle {
float: left;
width: 50px;
height: 50px;
border-style:solid;
border-width:5px;

}
.insideDiv {
 text-align: center;   
}

</style>

<div class="yourDivStyle"><p class="insideDiv">div 1</p></div>
<div class="yourDivStyle"><p class="insideDiv">div 2</p></div>
<div class="yourDivStyle"><p class="insideDiv">div 2</p></div>

http://jsfiddle.net/Hg6DK/

于 2013-09-28T19:02:44.950 回答
0

尝试这样的事情：

#top div{
    display:inline-block;
    width:33%;
    text-align:center;
}
于 2013-09-28T19:18:48.543 回答
0

这个怎么样：

<HTML>
    <BODY>
        <DIV id="container" style="margin-left: auto; margin-right: auto;">
            <DIV id="topleftnav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the left
            </DIV>
            <DIV id="centerNav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the middle
            </DIV>
            <DIV id="rightNav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the right
            </DIV>
        </DIV>
    </BODY>
</HTML>
于 2013-09-28T19:02:46.917 回答
0

This should be the solution. adjust the width values to your needs.

<html>

<head>
<style type="text/css">
    #container 
    {
        width:600px;
    }
    #centernav 
    {
        width:200px;
        float:left;
    }
    #topleftnav 
    {
        width:200px;
        float:left;
    }
    #toprightnav 
    {
        width:200px;
        float:left;
    }
    .center 
    {
        width:150px;
        margin:auto;
    }
</style>
</head>
<body>
    <div id="container">

        <div id="topleftnav">
            <div class="center">
                LEFTNAV
            </div>
        </div>

        <div id="centernav">
            <d iv class="center">
                CENTER
            </div>

        <div id="toprightnav">
            <div class="center">
                RIGHTNAV
            </div>
        </div>

    </div>
</body>

</html>
于 2013-09-28T19:06:37.027 回答