将中心内容放在div容器的中间 [英] Center content in the middle of div container

问题描述

我正在尝试创建一个瓦片（方块），内容中心完美地居中。

I'm trying to create a "tile" (square block) with content centered perfectly in the middle of it.

以下是HTML

  <div class="tile-facebook">
    <h5>Facebook</h5>
    <div class="tile-notification">4</div>
    <h4>notifications</h4>
  </div>

和CSS

.tile-facebook{
  width:175px;
  height:175px;
  background: #3b5998 ;
  text-align: center;
  border-radius: 10px;
  border-style: solid;
  border-color: #ccc;
  border-width:1px;
  color: white;
}

.tile-notification{
  font-size:80px;
  font-weight:bold;
  padding:10px 0px;

}

我有文本，但我想它直接在中间与顶部和底部相同的填充。

I've got the text in the middle of the block, however I want it to be directly in the middle with the same padding from the top and bottom. Thoughts?

推荐答案

您可能无法设置高度，但使用伪元素或额外元素从您的boxe。

You might not set the height , but use a pseudo or extra element to draw your square from any width of your boxe.

100％的垂直填充+ inline-block是一种绘制正方形并在其中间添加内容的方法。

vertical padding at 100% + inline-block is a way to draw a square and add content in its middle.

<div class="tile-facebook">
    <div class="wrapper">
        <h5>
            Facebook
        </h5>
        <div class=" tile-notification ">
            4
        </div>
         <h4>
             notifications
        </h4>
    </div>
</div>

.tile-facebook {
    width:175px;
    background: #3b5998;
    text-align: center;
    border-radius: 10px;
    border-style: solid;
    border-color: #ccc;
    border-width:1px;
    color: white;
}
.tile-notification {
    font-size:80px;
    font-weight:bold;
}
.tile-facebook .wrapper * {
    margin:0;
}
.tile-facebook:before {
    padding-top:100%;
    content:'';
}
.tile-facebook:before,
.wrapper {
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/cnq82/

关于垂直填充或边距的一些说明： http://www.w3.org/TR/CSS2/box.html#padding-properties http://www.w3.org/TR/CSS2/box .html＃propdef-margin-top

some explanation about vertical % padding or margin : http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

所以，（希望它更清楚一点：））

So, (hope it makes it a bit more clear : ) )

如果你给一个100％的垂直填充，它的高度将等于父的宽度。

If you give a vertical padding of 100% its height will be equal to width of parent.

如果你想要高度20px可以： padding：100％0 20px 0; 或 padding：20px 0 100％0;

If you want height to be taller of 20px you can do : padding:100% 0 20px 0 ; or padding:20px 0 100% 0;

如果你想要一个比例为4：3的盒子，只需要 padding-top：75％; 或 padding：50％0 25％0;

。

If you want a box with a ration of 4:3 , just do padding-top:75%; or padding:50% 0 25% 0;.

伪元素或额外元素可以是浮动， 。

pseudo or extra element can be floatting, or inline-block for vertical alignment.

您不需要在父级CSS中设置宽度。

You do not need to set a width in parent's CSS.

这篇关于将中心内容放在div容器的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！