如何将 3 个 div 并排放置并将每个内容居中 [关闭]答案

【问题标题】：How do I put 3 div's side by side and center the content in each one [closed]如何将 3 个 div 并排放置并将每个内容居中 [关闭]
【发布时间】：2013-09-29 03:18:48
【问题描述】：

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

左上角导航

顶部中心

右上角导航

代码：

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

【问题讨论】：

要求代码的问题必须表明对所解决问题的最低理解。包括尝试的解决方案、为什么它们不起作用以及预期的结果。另见：Stack Overflow question checklist
如果它对位于joekellywebdesign.com/churchsample/home.html的网站有帮助
如果您将 text-align="center" 放在您的 placeholderdiv 上，它应该会为您将链接居中。
您确定要支持超过 13 年的浏览器吗？删除图层标签并更改 function rotater() { document.getElementById("placeholderdiv").innerHTML=items[current];当前=（当前==items.length-1）？ 0：电流+1； setTimeout(rotator,howOften*1000); }

标签： html css

【解决方案1】：

CSS

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

【讨论】：

添加一个浮点数：左；如果不去内联。如果使用 html5 将 div 更改为
。投票

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

试试这样的：

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

【讨论】：