我如何把3 div并排，并在每个中心的内容 [英] How do I put 3 div's side by side and center the content in each one

问题描述

我刚接触css，请以简单的方式解释。我想要3个divs彼此相同的大小，每个div中的内容为中心。我有一个中心div与旋转图像，我的左右divs每个包含3个链接。我已经尝试了一切从设置每个div的宽度为左，右和右右浮动和中间的中心。我在这个网站上看过一些其他问题，像这样，但我不明白任何答案。如果它有帮助我使用以下名称为我的div：

I'm new to css so please explain in easy terms. I want 3 divs the same size as each other beside each other with the content in each div to be centered. What I have is a center div with a rotating image and my left and right divs each contain 3 links. I've tried everything from setting the width for each div to floating the left left and right right and centering the middle. I've looked at some other questions like this one on this site but I don't understand any of the answers. If it helps I'm using the following names for my divs:

topleftnav

topleftnav

topcenter

topcenter

toprightnav

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>

推荐答案

<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 div并排，并在每个中心的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！