Question

我想在DIV中渲染一些文本，这些文本应该出现在SPAN的中心 - 垂直和水平。

这是我的jsfiddle - http://jsfiddle.net/8Syqv/13/

HTML：

 <span>something here</span>

CSS：

body { 身高：100％; 宽度：100％; }

span {
position: absolute;
border: 1px red solid;
height: 30%;
width: 40%;
text-align: center;
vertical-align: middle;
left: 0;
margin: auto;
top: 0;
right: 0;

}

我看过这些：

Vertical and Horizontal alignment of text with CSS

How to center an element horizontally and vertically?

以及更多......

但是，这里提出的想法对我的jsfiddle不起作用。我想我在这里遗漏了一些东西。不确定＆gt;

谢谢

Answer 1

这可能会改变您撰写问题的HTML。但我想，无论如何这会对你有所帮助：

DEMO：http://jsfiddle.net/8Syqv/39/

（已更改）HTML

<div>
    <span>something here</span>
</div>

一些CSS

body 
{
    height: 100%;
    width: 100%; 
}

div
{
   border: 1px red solid;
   height: 30%;
   width: 40%;  
   text-align: center;
   left: 0;
   margin: auto;
   top: 0;
   right: 0;
   position: absolute;
}

span 
{  
    display: inline-block; 
    vertical-align: middle;
}

div:after
{
   display: inline-block; 
   vertical-align: middle; 
   height: 100%;
   content:"";
}

使文本水平和垂直显示在SPAN的中心

1 个答案: