Question

除非我使用宽度（以像素为单位） - 我无法使<p>元素的宽度与父元素的宽度相同。

的示例

示例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>元素的宽度不足以使水平居中。

有什么想法吗？

Answer 1

display

中的.some-class div小姐

.some-class div {
    display: table;
}

Answer 2

你可以尝试

.some-class div p {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 24vw;
  margin: 0px;
}

但是如果你有超过1行的文字

那就不会很蹩脚

第二个解决方案：

.some-class div p{
  position: absolute;
  display:block;
  width: 100%;
  height: 20px;
  top:50%;
  margin-top: -10px;
  text-align:center;
}

当你有线路扭曲时会更好，但是它不能用2行以上正确居中

显示表格单元格宽度无法正常工作

2 个答案: