除非我以像素为单位使用宽度 - 我无法让<p>
元素的宽度与其父母相同。显示表格单元宽度不能正常工作
这是怎么回事的例子:http://jsfiddle.net/sYEAn/
例如HTML
<body>
<div class="some-class">
<div>
<p>Some text</p>
</div>
</div>
</body>
CSS:
.some-class{
position:relative;
margin-top:2vmin;
width:24vw;
height:24vw;
background:rgb(0,0,0);
}
.some-class div{
position:absolute;
z-index: 6;
width:24vw;
height:24vw;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(255, 255, 255, 0.2);
}
.some-class div p{
display:table-cell;
width:24vw;
height:24vw;
vertical-align:middle;
text-align:center;
}
的基本思想是<div>
内已居中的文本。如果我沟通<p>
并将文本留在<div>
(通过设置display:table-cell
),但是水平居中不起作用,但是垂直居中不起作用。如果我喜欢在我提供的jsfiddle中,那么<p>
元素的宽度不足以实现水平居中。
任何想法?
http://jsfiddle.net/sYEAn/5/ –
已经尝试过。现在再试一次。不工作,也不在jsfiddle中,也不在实际情况下。 –
@JitendraPancholi谢谢 - 这工作!一直在尝试错误的父母。我怎样才能接受你的答案? –