Question

我必须制作像列一样的东西，但没有桌子。这是示例代码：

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    <div class="endfloat"></div>
</div>

.left位于左侧，.center位于中间，.right位于右侧。但是，.center也应该与中间垂直对齐。这是示例和CSS示例： jsFiddle

Answer 1

包装实际元素是一个表格单元格：

HTML

<div class="main">
    <div class="table-cell">
        <div class="left"></div>
    </div>
    <div class="table-cell">
        <div class="center"></div>
    </div>
    <div class="table-cell">
        <div class="right"></div>
    </div>
</div>

SCSS

@mixin defaultDiv($bg, $height: 300px) {
    width: 200px;
    height: $height;
    background-color: $bg;
    display: table-cell;
}

.main {
    outline: 1px solid red;
    width: 600px;
    display: table;

    .table-cell {
        display: table-cell; 
        width: 200px;
        vertical-align: middle;
    }

    .left {
        @include defaultDiv(green);
    }
    .center {
        @include defaultDiv(blue, 200px);
    }
    .right {
        @include defaultDiv(yellow, 250px);
    }
}

JSFiddle演示：http://jsfiddle.net/3728vxa9/2/

Answer 2

根据中心元素的高度是以像素为单位还是以百分比表示，您可以在其上方和下方放置div。例如，如果它的高度为50％，则在其上方和下方放置一个div，每个高度为25％。

HTML将如下所示

<div class="main">
  <div class="left"></div>
  <div class="centerTop"></div>
  <div class="center"></div>
  <div class="centerBottom"></div>
  <div class="right"></div>
  <div class="endfloat"></div>
</div>

CSS将如下所示

.centerTop {
    height: 25%
}
.center {
    height: 50%
}
.centerBottom {
    height: 25%
}

Answer 3

以下是两个可以在中间对齐div的方法示例：

使用HTML：

<div class="center" style="margin: 0 auto;"></div>

在单独的CSS文件中设置样式：

.center { margin: 0 auto; }

如果要制作三列并希望它们根据窗口宽度调整大小，则将宽度值设置为33％。这是一个例子：

.center {
    width: 33%;
}

.left {
    width: 33%;
}

.right {
    width: 33%;
}

Answer 4

请看这个链接， http://jsfiddle.net/n6t3qrux/

@mixin defaultDiv($bg, $height: 300px) {
    float: left;
    width: 200px;
    height: 300px;
    background-color: $bg;
}

.main {
    outline: 1px solid red;
    width: 600px;
    height: 300px;
    position: relative;

    .left {
        @include defaultDiv(green);
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
    }
    .center {
        @include defaultDiv(blue, 200px);
        margin: auto;
        position: absolute;
        left:0;
        right: 0;
        top: 0;
        bottom: 0; 
        height: 200px;
    }
    .right {
        @include defaultDiv(yellow, 250px);
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    .endfloat {
        clear: both;     
    }
}

我希望这能帮到你

使DIV在中间垂直对齐

4 个答案: