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

I'm still fairly new to CSS and HTML, so I need a little help. I'm making a theme for my tumblr blog and I have three main divs that I'd like to be aligned side by side in the same row, as well as centered.

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

It should look something like this (edited with Photoshop):

它应该看起来像这样(用Photoshop编辑):

Right now it looks like this:

现在它看起来像这样:

I've looked everywhere for answers, and I've tried multiple things. Almost every tutorial or piece of advice includes the float:left; thing, but that didn't work. Is there something wrong with the code I already have? What is it that I need to change or add? I'd like the image to be in the center, the description to be on the left and the links to be on the right.

我到处寻找答案,我尝试了很多东西。几乎每个教程或建议都包括浮动:左;事情,但那没用。我已有的代码有问题吗?我需要更改或添加什么?我希望图像位于中心,描述位于左侧,链接位于右侧。

Here are the codes:

以下是代码:

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

Your help is appreciated!

非常感谢您的帮助!

4 个解决方案

#1

If ancient browser support is not an issue, use css3 Flex. Apply the following css for the parent element

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

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

or you can make the child divs inline-block elements, center it using text-align and adjust the space using 'margin`, something like

或者你可以使子divs内联块元素,使用text-align将其居中并使用'margin`调整空间,类似于

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

#2

I think you could group the three divs inside another one, set its display css property to block and then center this last one. You should also set the display property to inline-block on the three original divs.

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

Good luck!

#3

Another way to do it is add "float:left;" to each of the div styles which are acting as the containers for the data you want to view side by side. For example;

另一种方法是添加“float:left;”每个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;
}

So your CSS would be:

所以你的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;
}

Made a JSFiddle with this in action: http://jsfiddle.net/vjZqC/

在这个行动中做了一个JSFiddle:http://jsfiddle.net/vjZqC/

#4

Here is the css you have to add to yours. I've tried it and it works:

这是您必须添加到您的CSS。我已经尝试过了,它有效:

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

    #topimage {
    display:inline-block;
    }

    #topdeschold {
    display:inline-block;
    }

    #toplinkshold {
    display:inline-block;
    }