如何创建一个方形链接，文本在中心和Word-Wrapping中垂直对齐？

Question

我认为使用简单的display:inline-block和vertical-align:middle会非常简单，但我尝试的都没有。

是否可以创建一个100px×100px的正方形，文本水平和垂直居中并包裹，整个正方形是链接？

如果文字比正方形宽，那么文字必须在下面包裹，整个文字必须仍然是垂直和水平居中的。

Answer 1

以下是使用display:flex创建文本中心的一种方法。

＆＃13;

＆＃13;

.main {
    align-items: center;
    border: 1px solid;
    display: flex;
    height: 300px;
    justify-content: center;
    width: 300px;
}

＆＃13;

<div class="main">
Some text in center
</div>

＆＃13;

＆＃13;

＆＃13;