Question

我正在尝试将文本居中放置在矩形中，但未成功。我想为每种字体编写代码。

.button {
display: block;
color: rgb(181, 1, 88);
background-color: rgb(248, 224, 237);
width: 232px;
height: 200px;
border-radius: 8px;
margin-left: 368px;
box-shadow: 5px 4px rgb(181, 1, 88);
text-align: center;
}

Answer 1

您可以使用CSS flex layout。

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(181, 1, 88);
  background-color: rgb(248, 224, 237);
  width: 232px;
  height: 200px;
  border-radius: 8px;
  margin-left: 30px;
  box-shadow: 5px 4px rgb(181, 1, 88);
  text-align: center;
}

<a class="button" href="#">Some<br>text</a>

Answer 2

对于您而言，最简单的解决方案是将您定义的height替换为padding，如下所示：

.button {
display: block;
color: rgb(181, 1, 88);
background-color: rgb(248, 224, 237);
width: 232px;
// height: 200px; ——replace with padding below
padding: 100px 0;
border-radius: 8px;
margin-left: 368px;
box-shadow: 5px 4px rgb(181, 1, 88);
text-align: center;
}

这是更新的小提琴：

https://jsfiddle.net/54jqrfuo/

Answer 3

一种实现此目的的方法是将文本包装在com标记中，并与CMD java -classpath src/java com.Main和<p>对齐。

top: 50%

transform

Answer 4

您可以使用以下3个属性将元素对齐到中心。

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

这是将元素放置在中心位置的完整源代码。

.button {
   display: flex;
   justify-content: center;
   align-items: center;
   color: rgb(181, 1, 88);
   background-color: rgb(248, 224, 237);
   width: 232px;
   height: 200px;
   border-radius: 8px;
   margin-left: 368px;
   box-shadow: 5px 4px rgb(181, 1, 88);
   text-align: center;
 }

<a class="button" href="#">Some<br>text</a>

Answer 5

尝试

<div class="button">
   <a href="#">Some<br>text</a>
</div>

.button {
        display: table;
        color: rgb(181, 1, 88);
        background-color: rgb(248, 224, 237);
        width: 232px;
        height: 200px;
        border-radius: 8px;
        margin-left: 368px;
        box-shadow: 5px 4px rgb(181, 1, 88);
        text-align: center;
        vertical-align: middle;
     }
     .button a{
        display: table-cell;
        vertical-align: middle;
     }

如何在CSS中将某些文本居中放置在矩形中？

5 个答案: