示例1

Question

我正在尝试将一些文本放在CSS框的中间。我厌倦了使用top：20px;但这推动了整体，而不是文本。任何想法我该怎么做？

这是我的代码：jsfiddle

div {
    background: #ff9600;
    background: rgba(255, 150, 0, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 10;
}

    <body>
        <div>text</div>
    </body>

Answer 1

示例1

类似于：this fiddle。

它使用css：

div {
    height: 100%;
    width: 100%;
    background: #000;
    font-size: 12px;
    font-style: oblique;
    color: #FFF;
    text-align: center;
    margin-top: 20px;
    margin-left: 5px;
    line-height: 80px;
}

这对你很有帮助。：）

示例2

更通用的方法是使用span等div { width: 250px; height: 100px; line-height: 100px; text-align: center; border: 1px solid #123456; } span { display: inline-block; vertical-align: middle; line-height: normal; }

使用：

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
  border: 1px solid red;
}

span {
  display: table-cell;
  vertical-align: middle;

}

（2）

的可能替代方案

第二个例子的一个细微变化是将div视为表格单元格，因此将上述css更改为：

{{1}}

所以this demo也适合你。

Answer 2

尝试此

在

中删除此css

width:100%;
height:100%;

添加此css

left:0;
right:0;
top:0;
bottom:0;
padding-top:20px;

<强> Demo

Answer 3

您可以使用padding移动框内的文字。

但是，我认为你应该为文本创建一个标签（一个盒子），并给它一些css属性，使这个盒子位于主div（主盒子）的中心。

Answer 4

试试我的代码：

<div>
    <span class="vertical-text">
        TEXT
    </span>
</div>

    $('.vertical-text').each(function() 
    {
        parent_height = $(this).parent().height();
        $(this).parent().css(
        {
            'height': parent_height + 'px',
            'line-height': parent_height + 'px',
        });
        $(this).css(
        {
            'line-height': 'normal',
            'display': 'inline-block',
        });
    });

演示：http://jsfiddle.net/Silon/caonccjx/

在div中居中一段文本

4 个答案:

示例1

示例2

（2）