Question

与布局问题有一些CSS相关的问题。首先看这个截图：在这里我使用了这样的css：

.image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;}
.description{font-size:15px; font-style:italic; padding:10px; color:#5C5C5C; text-shadow:0px 0px 1px #A1A1A1;}
.image, .description{display:block;}
.main-article{clear:both;}

但我想做的是在中间显示说明。像这样：你能告诉我CSS，把描述类div放在中间，就像第二张图片一样。感谢

Answer 1

基本上它将是：

.description, .image {
    display:inline-block;
    vertical-align:middle;
}

Answer 2

在说明和图片周围添加包装，然后使用display: table

#container { 
    display: table;
}
#container .image, #container .description {
    display: table-cell;
    vertical-align: middle;
}

Answer 3

警告！此框模型正在修订中。

我使用Flexible Box Model或Flexbox。

您必须将以下类放在父元素中：

p-flexbox 和 flex-hcc

其中：

p-flexbox 表示 parent-flexbox
flex-hcc 表示 flexbox-horizontal-center-center

在样式中你必须放置这些CSS规则：

.p-flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: box;
}

另外这些CSS规则

.flex-hcc {

   -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
           box-orient: horizontal;

   -webkit-box-pack: center;
      -moz-box-pack: center;
           box-pack: center;

   -webkit-box-align: center;
      -moz-box-align: center;
           box-align: center;

}

以下是一个示例：http://jsfiddle.net/GnbZD/1/

干杯，莱昂纳多

Answer 4

您可以围绕这两个项目设置容器的高度，然后将描述设置为

top: 50%

这是一个小提琴

http://jsfiddle.net/andrewliu/mS4pB/1/

更新：

我已经修改了一下，你可以在你需要的地方做一些hack并使用margin-top: 50%;然后使用margin-top: -25%;

的另一个容器

http://jsfiddle.net/mS4pB/9/

Answer 5

像GCyrillus说的那样：

display: inline-block;
vertical-align: middle;

会奏效。但是，您没有定义宽度。所以你要做的是：

.image{ width: 300px; padding-top:10px; padding-left:10px; padding-bottom:10px; }
.description{ width: 600px; font-size: 15px; font-style: italic; padding: 10px; color: #5C5C5C; text-shadow: 0px 0px 1px #A1A1A1; }
.image, .description{ display: inline-block; vertical-align: middle; }

一旦您将这些宽度更改为您需要的任何宽度，它将适用于您。为了更好地衡量，请确保您不会成为内联块空白错误的受害者，因此请执行以下操作：

.image { margin-left: -4px; } //It works sometimes for me but I think it isn't cross-browser very well.

或者不允许HTML中的元素之间有任何空格，如下所示：

<div class="description">
    Lorem Ipsum
</div><div class="image">
    <img />
</div>

另外，如果你想支持IE7：

.image, .description { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; }  //Some people don't like the hacks and some people don't like supporting old IE ;-)

使用css将DIV类放在中间

5 个答案: