你如何将三个div并排放置然后居中？

Question

我对CSS和HTML还不太新，所以我需要一些帮助。我为我的tumblr博客制作了一个主题，我有三个主要的div，我希望在同一行并排排列，以及居中。

看起来应该是这样的（用Photoshop编辑）：

现在它看起来像这样：

我到处寻找答案，我尝试过多种方法。几乎每个教程或建议都包括浮动：左;事情，但那没有用。我已有的代码有问题吗？我需要更改或添加什么？我希望图像位于中间，描述位于左侧，链接位于右侧。

以下是代码：

#top {
margin-left:-35px;
margin-top:30px;
}

#topimage {
width:64px;
height:64px;
border-radius:3px;
border:6px solid #fff;
background-image:url('{PortraitURL-64}');
}

#topdeschold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
}

#topdesc {
text-align:justify;
font-size:7px;
text-transform:uppercase;
}

#topdesctitle {
color:#df8d88;
font-size:9px;
text-transform:lowercase;
font-style:italic;
text-align:right;
}

#toplinkshold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
}

#toplinks {
display:block;
padding:6px;
background-color:#f8f8f8;
font-size:7px;
text-transform:uppercase;
}


<div id="top">

<div id="topimage"></div>

<div id="topdeschold">
 <div id="topdesctitle">blah blah balh</div>
 <div id="topdesc"> Blah! Blah blah balh? lbalhlalg? dlff 
 df gb fgbgn fgnghnghn gnhgn fhng! DGSsdf gf</div>
</div>

<div id="toplinkshold">
 <div id="toplinks">
  <a href="/">home</a>
 </div>

 <div id="toplinks">
  <a href="/">ask</a>
 </div>

 <div id="toplinks">
  <a href="/">submit</a>
 </div>

 <div id="toplinks">
  <a href="/">more</a>
 </div>
</div>

</div>

感谢您的帮助！

Answer 1

如果古老的浏览器支持不是问题，请使用css3 Flex。将以下css应用于父元素

#top {
    display:flex;
    justify-content:space-around;
}

或者你可以让孩子使用inline-block元素，使用text-align将其居中，并使用'margin`调整空间，例如

#top {
    text-align:center;
}
#top > div {
    display:inline-block;
    margin: 1em; /* or your desired margin */
}

Answer 2

我认为你可以将三个div组合在另一个div中，将其display css属性设置为block，然后将最后一个设为中心。您还应该在三个原始div上将display属性设置为inline-block。

祝你好运！

Answer 3

另一种方法是添加＆＃34; float：left;＆＃34;每个div样式，作为要并排查看的数据的容器。例如;

#topimage {
width:64px;
height:64px;
border-radius:3px;
border:6px solid #fff;
background-image:url('{PortraitURL-64}');
float:left;
}
#topdeschold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}
#toplinkshold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}

所以你的CSS将是：

#topimage {
width:64px;
height:64px;
border-radius:3px;
border:6px solid #fff;
background-image:url('{PortraitURL-64}');
float:left;
}
#topdeschold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}
#toplinkshold {
width:150px;
background-color:#fff;
padding:25px;
margin-top:5px;
float:left;
}
#top {
margin-left:-35px;
margin-top:30px;
}
#topdesc {
text-align:justify;
font-size:7px;
text-transform:uppercase;
}
#topdesctitle {
color:#df8d88;
font-size:9px;
text-transform:lowercase;
font-style:italic;
text-align:right;
}
#toplinks {
display:block;
padding:6px;
background-color:#f8f8f8;
font-size:7px;
text-transform:uppercase;
}

在行动中制作了一个JSFiddle：http://jsfiddle.net/vjZqC/

Answer 4

这是你必须添加到你的CSS。我已经尝试过它并且有效：

    #top {
    display:block;
    text-align:center;
    }

    #topimage {
    display:inline-block;
    }

    #topdeschold {
    display:inline-block;
    }

    #toplinkshold {
    display:inline-block;
    }