Question

我已经尝试了所有可以找到的方法......对我来说没有任何效果...... 我只能围绕在另一个div中对齐div（或块元素）的问题来解决这个问题。这可能是多么困难..

我想垂直对齐绿色块。

这里是小提琴：http://fiddle.jshell.net/795St/1/

<div class="rtl centerwrapper">
    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div>Average</div>
</div>

.green-block {
    background-color: #02A556;
    margin: 0 .25em 0 .25em !important;
    width: 1em;
    height: 0.5em;
}
.pull-right {
    float: right;
}
.rtl {
    direction:rtl;
}
.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
}

请..任何人都可以帮助..并解释我做错了什么？

编辑：让我更清楚...... 我需要一行中的所有元素。只需要在文本的垂直中间对齐块。

Edit2：这是一张图片

enter image description here

Answer 1

新答案

这是新的小提琴链接http://fiddle.jshell.net/795St/16/

<强> CSS

.green-block {
    background-color: #02A556;
    margin: 0 .25em 0 .25em !important;
    width: 1em;
    height: 0.5em;
    vertical-align: middle;
    position: relative;    
}
.pull-right {
    display: inline-table;
}
.rtl {
    direction:rtl;
}
.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
}

HTML
<div class="rtl centerwrapper">

    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div class="green-block pull-right"></div>
    <div class="pull-right">Average</div>
</div>

输出屏幕截图

Center aligned divs

旧答案

这是所需的输出 http://fiddle.jshell.net/795St/5/

.pull-right {
    display: inline-table;
}

.centerwrapper {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
    text-align: center;
}

对于内部div，我将display添加为inline-table，这样它们就不会被视为块元素并显示在一行中。对于外部div，我将text-align添加为center。所以它会在中心显示内容。

你的小提琴只做了2次改动。

对于内部div而不是float: right，我添加了display:inline-table
外部div添加了text-align:center。

Answer 2

Demo

可以吗？

.centerwrapper div:last-child{
    margin-top:-8px;
 }

Answer 3

http://fiddle.jshell.net/n234A/

给你的绿色块一个合适的上边距，使它们位于包装中间。

在这个演示中，我给包装器div一个红色背景，以显示更好的居中

Answer 4

您可以使用 display：flex 执行此操作：http://codepen.io/gc-nomade/pen/wmECy

html,body {
  height:100%;
  width:100%;
  margin:0;
}
body , body > div{
  display:flex;
}
div {

  margin:auto;
}
.green-block {
    background-color: #02A556;
    margin: 0 .25em 0 .25em !important;
    width: 1em;
    height: 0.5em;
order:4;
}
.first {
  flex:1;
    order:1;
}

或显示：表格 http://jsfiddle.net/MxE8Y/5/（包括IE8）

body, html {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
}
div {
    display:table;
    direction:rtl;
    margin:auto;
    border-spacing:0.25em;
}
.green-block {
    background-color: #02A556;
    width: 1em;
    height: 0.5em;
    display:table-cell;
}

Answer 5

 .green-block {
   background-color: #02A556;
   margin: 6px 10px!important;
   width: 1em;
   height: 0.5em;
 }

Answer 6

您必须将所有div显示为inline-block s

.centerwrapper div { display: inline-block; }

Answer 7

HTML代码平均

和CSS

.green-block {
            background-color: #02A556;
            margin: 0 .25em 0 .25em !important;
            width: 1em;
            height: 0.5em;
            margin:10px!important;
            list-style:none;
        }
        .pull-right {
            float: right;
        }
        .rtl {
            direction:rtl;
        }
        .centerwrapper {
            position: absolute;
            top: 50%;
            left: 0px;
            width: 100%;
            overflow: visible;
        }
        .clear{
            clear:both;
        }

使用它。并以你想要的大小给出边距

div中心div垂直

7 个答案: