Question

我是css的新手，所以请简单解释一下。我希望3个div相同的大小彼此相邻，每个div中的内容都居中。我所拥有的是一个旋转图像的中心div，我的左右div包含3个链接。我已经尝试了从设置每个div的宽度到左右和左右浮动并使中间居中的一切。我在这个网站上看了一些像这样的问题，但我不明白任何答案。如果它有助于我为我的div使用以下名称：

topleftnav

topcenter

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>

Answer 1

CSS

#1 { width: 33%; display: inline text-align: center; '＃2 {宽度：33％; 显示：内联 text-align：center; '#3 { width: 33%; display: inline text-align: center;

Answer 2

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

Answer 3

这个怎么样：

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

Answer 4

这应该是解决方案。根据需要调整宽度值。

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

Answer 5

尝试这样的事情：

#top div{
    display:inline-block;
    width:33%;
    text-align:center;
}

如何并排放置3个div并将每个内容放在中心位置

5 个答案: