Search code examples
htmlcsshyperlinkvertical-alignment

How to Create a Square Link with Text Vertically-Aligned in Center and Word-Wrapping?

I thought this would be very straightforward with a simple display:inline-block and vertical-align:middle, but nothing I try works.

Is it possible to create a square that is 100px by 100px with text horizontally and vertically centered and wrapped and where the entire square is a link?

If the text is wider than the square, then the text must wrap below and the entire text must still be vertically and horizontally-centered.

Solution

  • Here is one way you can make text center using display:flex.

    .main {
    align-items: center;
    border: 1px solid;
    display: flex;
    height: 300px;
    justify-content: center;
    width: 300px;
}
    <div class="main">
Some text in center
</div>