html div中css设置平均水平分布,CSS - 水平和垂直分布div

4 个答案:

答案 0 :(得分：2)

首先，您可以使用Flexbox以更好的方式获得相同的结果。

对于垂直对齐文本到中间，您可以通过添加line-height属性并将其设置为容器div的相同精确高度来接近它，因此在您的情况下它将是125px或者如果您使用flexbox它可以是完成对齐项目：中心，这是最终代码：

＆＃13;

＆＃13;

.wrapper {

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row nowrap; /* Safari 6.1+ */

flex-flow: row nowrap;

-webkit-justify-content: space-between; /* Safari 6.1+ */

justify-content: space-between;

font-weight: bold;

height: 125px;

min-width: 612px;

padding: 5px;

border: 2px dashed #444;

}

.wrapper > div{

display: -webkit-flex;

display: flex;

-webkit-flex-basis: 150px;

flex-basis: 150px;

justify-content: center;

align-items: center;

}

.aside-1, .aside-3{

background: #ccc

}

.aside-2{

background: #0ff;

}＆＃13;

＆＃13;＆＃13;＆＃13;

答案 1 :(得分：1)

您可以使用display:table/table-cell并使用border-collapse/spacing + margin的解决方法获得所需的输出。

#wrap {

border: 2px dashed #444;

height: 125px;

text-align: justify;

-ms-text-justify: distribute-all-lines;

text-justify: distribute-all-lines;

overflow:hidden;

/* just for demo */

width: 612px;

}

#container {

margin: 0 -81px; /*must be equal to border-spacing */

}

#table {

display: table;

table-layout: fixed;

border-collapse: separate;

border-spacing: 81px 0;

width: 100%;

}

.box1,

.box2,

.box3,

.box4 {

width: 150px;

height: 125px;

vertical-align: middle;

display: table-cell;

text-align: center;

}

.stretch {

width: 100%;

vertical-align: middle;

display: table-cell;

}

.box1,

.box3 {

background: #ccc

}

.box2,

.box4 {

background: #0ff

}

答案 2 :(得分：1)

Flexbox救援！

良好的资源：

#container {

display: flex; /* magic maker */

justify-content: space-between; /* set equal space between boxes */

border: 2px dashed #444;

height: 125px;

/* just for demo */

min-width: 612px;

}

.box1, .box2, .box3, .box4 {

display: flex; /* magic maker */

/*

shorthand for flex-grow, flex-shrink, and flex-basis properties

we don't want the boxes to grow or shrink, and the basis is the explicit

width we want them

*/

flex: 0 0 150px;

justify-content: center; /* horizontally center text within */

align-items: center; /* vertically center text within */

height: 125px;

}

.box1, .box3 {

background: #ccc

}

.box2, .box4 {

background: #0ff

}

答案 3 :(得分：0)

你熟悉Bootstrap吗？

这是Twitter制作的CSS框架。

把它放在脑袋里 -

在你的身体中使用它来查看它的功能，上面有很棒的文档。

现在在第二个./col-lg-4 div的内部，所有内容都将在屏幕中完美居中，文本左对齐。

如果要将文本居中对齐，请替换