Html 如何使用display:flex和display:block制作一个可点击的div框？

我试图使box div可以单击，但我使用的代码是

display:flex;
align-items: center;
justify-content: center;

使文本水平居中，因为当我使用display:block时，如果文本较长，则文本不会水平居中

我这里有一个演示

当您尝试单击右div时，必须将鼠标指向文本。我希望整个右div是可点击的（像文本链接一样），而不管文本的长度。至于左div，您可以将鼠标悬停在div上的任何位置，因为文本很长，所以可以单击它。我认为这取决于文本的宽度，因为当我尝试使用Firebug并将鼠标悬停在右侧div的文本上时，高度是100%，但宽度取决于文本的长度。有人知道如何使div成为可点击的链接吗

---

请尽量使用CSS代码：）

右框中的链接标记没有填满整个宽度。这就是为什么需要单击文本（或文本上方或下方）

通过添加

显示：块和<代码>宽度：100%到link元素，它现在填充了整个右框

更新小提琴：

您应该将其添加到css文件中：

#rightq{
    margin-top:50%;
    margin-right:20%;
    height:100%;
    width:100%;
}

您想选择一个带有
的ID，但这是不可能的：）