2

对于布局问题有一些与 CSS 相关的问题。首先看到这个截图：http://i.stack.imgur.com/nmw69.png 在这里我使用了这样的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;}

但我想做的是在中间显示描述。像这样：http://i.stack.imgur.com/aX2B1.png 你能告诉我CSS，把描述类div放在中间，就像第二张图片一样。谢谢

4

5 回答 5

2

基本上它将是： 

.description, .image {
    display:inline-block;
    vertical-align:middle;
}
于 2013-06-20T18:47:22.473 回答
2

在描述和图像周围添加一个包装器并使用display: table

#container { 
    display: table;
}
#container .image, #container .description {
    display: table-cell;
    vertical-align: middle;
}
于 2013-06-20T20:32:10.330 回答
1

警告！这个盒子模型正在修改中。

我会使用弹性盒模型或弹性盒。

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

p-flexbox和flex-hcc

在哪里：

  1. p-flexbox表示父flexbox
  2. flex-hcc表示flexbox-horizo​​ntal-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/

干杯，莱昂纳多

于 2013-06-20T19:56:17.573 回答
0

就像 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; }

一旦您将这些宽度更改为您需要的任何宽度，它就会对您很好。为了更好地衡量，请确保您不会成为 inline-block whitespace 错误的受害者，因此请应用：

.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 ;-)
于 2013-06-21T16:44:41.327 回答
0

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

top: 50%

这是它的一个小提琴

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

更新：

我做了一些修改，你可以做一些你需要有容器和使用的黑客，margin-top: 50%;然后另一个容器有margin-top: -25%;

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

于 2013-06-20T19:05:31.583 回答