垂直排列文本

-3

我有一个h3高度为100%。因此高度是未知的。我怎样才能将文本集中在自己内部？为了举例，我给出了父级的固定维度，但事实并非如此。我曾尝试使用垂直对齐，但这不起作用，我相信我可能需要更改display来做到这一点？垂直排列文本

我不想将文本居中在其父文件中，我知道各种方法来做到这一点。我想知道它是否可以垂直居中。文本需要在两个维度都是100％，以便链接填充父div。

.unknowndimensions{ 
 
    height:300px; 
 
    width:300px; 
 
    } 
 
.unknowndimensions h3{ 
 
    height:100%; 
 
    width:100%; 
 
    background:#f7f700; 
 
    text-align:center; 
 
    }

<div class="unknowndimensions"> 
 
    <a href="#"><h3>Title</h3></a> 
 
</div>

来源

2016-09-14 Buts

看看这个：https://css-tricks.com/centering-css-complete-guide/ –

@HaydenSchiff这是一个很好的资源，我经常使用它，但它使用的方法在这个例子中不起作用。 – Buts

@misterManSam不，这不是同一个问题。这不是div内的文字。解决方案将完全不同。 – Buts

使用表的方法，

.unknowndimensions{ 
 
    height:300px; 
 
    width:300px; 
 
    } 
 
.unknowndimensions a{ 
 
    display:table; 
 
    width:100%; 
 
height:100%; 
 
    } 
 
.unknowndimensions h3{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    background:#f7f700; 
 
    text-align:center; 
 
    }

<div class="unknowndimensions"> 
 
    <a href="#"><h3>Title</h3></a> 
 
</div>

来源

2016-09-14 03:25:36 link2pk

很酷的答案，我一直在使用哈克空使链接填充容器。我确信必须有另一种方式。这个答案符合法案。 – Buts

-2

容易。

line-height: 100%; 
vertical-align: middle;

行高将行的高度设置为100％，垂直对齐将文本置于中间。

来源

2016-09-14 03:16:06 Gauched

这不适用于片段或我的实际项目。也许行高不可能是100％？ – Buts

尝试将其设置为显示：inline-block;并将其放在父div中，该div也是display：inline-block。保持垂直对齐 – Gauched

行高：100％;只会使行高等于文字大小。即法线高度。 – Buts

垂直排列文本

回答

相关问题