Question

我有一个内部有文字和图像的div，它是190px x 190px，我希望所有内容都垂直居中。

我试过看SO和Google，似乎找不到这么简单的答案。

最简单的方法是什么？

HTML：

<div class="block">
   <h2>TITLE</h2><br/>
      <img src="...." width="190px"/>
         <p>Hello world</p>
</div>

CSS：

.block {
    position:relative;
    width:190px;
    height:190px;
    background-color:FFF;
    margin:10px;
    float:left;
    left:-10px;
    text-align: center;
    padding:10px;
    border:solid 1px #CCC;
    font-size:small;
}

.block p {
    text-align: left;
}

Answer 1

您好，您可以使用以下两个属性：

.block {
  display:table-cell;
  vertical-align:middle;
}

并删除float:left。查看此演示 http://jsfiddle.net/kGt54/17/ 并提出任何问题。

修改

如果你想保留float:left，你需要制作一个漂浮并具有保证金的外部容器：

.blockC { float:left; margin:10px; }

新演示 http://jsfiddle.net/kGt54/29/

Answer 2

.block {
        position:relative;
        background-color:FFF;
        margin:10px;
        float:left;
        left:-10px;
        text-align: center;
        padding:10px;
        border:solid 1px #CCC;
        font-size:small;
    }

    .block p {
        text-align: center;
    }

只需移除width:190px;中的height:190px;和.block{}以及.blick p{}中的text-align : left;，只需将text-align : center;更改为{{1}}我希望你知道的是什么想要实现......快乐的编码。

如何将数据置于父div中？

2 个答案: