如何在 CSS 中同时垂直和水平对齐？

Question

我有一个这样的盒子：

<section class="notes-list-box">
    <div class="nn">
        <div class="heading">Notes</div>
        <div class="boxdescription">With our complete study notes, your homework is much easier.</div>
    </div>
    <div class="ttn">
        <div class="heading">Things To Know</div>
        <div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of  the students.</div>
    </div>
    <div class="vdos">
        <div class="heading">Videos</div>
        <div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
    </div>
    <div class="sqaa">
        <div class="heading">Solved Question and Answer</div>
        <div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
    </div>
</section>

添加一点样式使其看起来像这样：

我试过这样使用 vertical-align：

.notes-list-box > div {
  vertical-align: top;
}

并且有效。但是我不知道如何align vertical at bottom让所有的小白space也归于底部

所以下面的白色space注释和解决的问题和答案white background一直到底部。

我想用白色填补那些空白space:

Answer 1

最简单的方法是使用 display: table CSS 属性。

JS Fiddle Here

HTML

<div class="table">
  <div class="table-row">
    <div class="heading table-cell">Notes</div>
    <div class="heading table-cell">Things To Know</div>
    <div class="heading table-cell">Videos</div>
    <div class="heading table-cell">Solved Question and Answer</div>
  </div>
  <div class="table-row">
    <div class="table-cell">With our complete study notes, your homework is much easier.</div>
    <div class="table-cell">Things to know provides additional information on every topic which enhance the knowledge of  the students.</div>
    <div class="table-cell">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
    <div class="table-cell">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
  </div>
</div>

CSS

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  border: 1px solid;
}
.heading {
  vertical-align: middle;
  text-align: center;
}

Here is an update 与您的样式相似。

Answer 2

我通过将所有内容设置为 100% 高度来使其正常工作，如下所示：http://jsfiddle.net/sur38w6e/

您的 html 未受影响。

.notes-list-box>div{
float:left;
width:120px;
background-color:yellow;
margin: 5px;
height:100%;
overflow:auto;
}

.heading{
  background-color:red;
}

.notes-list-box{
  background-color:green;
  overflow:auto;
  height:100%;
}

body,html{
  height:100%;
}

Answer 3

另一个使用 jquery 的替代方案。这里是 fiddle.

JQUERY

$('.parentheight').each(function(){
var maxdivheight = 0;
$('.childheight',this).each(function(){
  var divheight = $(this).height();
  // compare height
  if ( divheight > maxdivheight ) {
    maxdivheight = divheight;
  } else { }
});
// set all divs to max height
$('.childheight',this).height(maxdivheight);
});

HTML

<section class="notes-list-box parentheight">
    <div class="alignbox nn childheight">
    <div class="heading">Notes</div>
    <div class="boxdescription">With our complete study notes, your homework is much easier.</div>
  </div>
  <div class="alignbox ttn childheight">
    <div class="heading">Things To Know</div>
    <div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of  the students.</div>
  </div>
  <div class="alignbox vdos childheight">
    <div class="heading">Videos</div>
    <div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
  </div>
  <div class="alignbox sqaa childheight">
    <div class="heading">Solved Question and Answer</div>
    <div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
  </div>
</section>

CSS

.alignbox {
  float: left;
  width: 24%;
  border: 1px solid red;
}

Answer 4

使用flexbox.

我用过这个CSS:

.notes-list-box {
  display: flex;
  font-family: sans-serif;
}
.notes-list-box > div {
  margin: 0 5px;
  background-color: white;
}
.heading {
  color: white;
  font-weight: bold;
  padding: 10px 2px;
  text-align: center;
}
.boxdescription {
  padding: 5px;
}
.nn .heading {
  background-color: #61B5DF;
}
.ttn .heading {
  background-color: #41AF43;
}
.vdos .heading {
  background-color: #FF8A00;
}
.sqaa .heading {
  background-color: #FF1F2D;
}

查看 JSfiddle 上的结果。

如何在 CSS 中同时垂直和水平对齐？

How to align both vertically and horizontally in CSS?

html

css

alignment