我如何把3 div并排放在每一个中心

我是新来的css，所以请简单解释一下。我想要3个div彼此相同的大小，每个div的内容都要居中。我拥有的是一个带有旋转图像的中心div，我的左右div分别包含3个链接。我已经尝试了将每个div的宽度设置为左右和左右中间位置的所有内容。我已经看过这个网站上的其他一些问题，但我不明白任何答案。如果它可以帮助我使用下面的名字我的div：我如何把3 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>

来源

2013-09-28 Joe Elmore

问题要求代码必须证明正在解决这个问题的一个最小的理解。包括尝试解决方案，为什么他们没有工作，以及预期的结果。另请参阅：[堆栈溢出问题清单]（http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist） – Itay

如果它有助于网站原址位于http：//www.joekellywebdesign .com/churchsample/home.html –

如果你在'placeholderdiv'上放置了'text-align =“center”'，它应该为你的链接居中。 – Jeremy

CSS

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

来源

2013-09-28 18:58:08

你是我的英雄 –

加一个float：left;如果不是内联。如果使用html5将div更改为

。投票 –

<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-28 19:02:44 OBV

如何：

<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-28 19:02:46 MystikSpiral

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

<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-28 19:06:37 jan4is

尝试是这样的：

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

来源

2013-09-28 19:18:48 morgul

我如何把3 div并排放在每一个中心

回答

相关问题