我如何把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並排放在每一箇中心

回答

相關問題