Question

我试图在div的中心对齐一些文本，但我无法这样做。我想横向居中，但我想把它放在比中心稍高的位置。 div的固定高度为45％。我该怎么做呢？

.galf {
width : 100%;
height : 45.3%;
}
.galf a{

}

 <div class = "galf">
 <a>Hello</a>
 </div>

Answer 1

试试这个：

<html>
<head>
    <style>
        .galf {
        width : 100%;
        height : 45.3%;
        text-align: center;
        }
    </style>
</head>
<body>
    <div class = "galf">
        <a>Hello</a>
    </div>
</body>

Answer 2

使用flex它会使文本垂直和水平居中对齐

＆＃13;

.container {
  height: 400px;
}
.galf {
  width: 100%;
  height: 45.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  background: black
}

.item {
    height: 30%;
    color: black;
    background: red;
    width: 30%;
    padding: 3%;
    border: 1px solid black;
    text-align: center;
}

.item-container
{
  display:flex;
  
}

＆＃13;

<div class="container">
  <div class="galf">
    <a>Hello</a> 
  </div>
  <div class="item-container">
  <div class="item">
    First Div
  </div>
  <div class="item">
    Second Div
  </div>
  <div class="item">
    Third Div
  </div>
  </div>
</div>

＆＃13;

Answer 3

假设您只是试图将文本居中对齐div而不是居中对齐它垂直和水平。

对于水平居中对齐文本，我创建了一个小提琴，其中包含以下解决方案： -

我希望这会有所帮助。

HTML Code:-

<div class = "galf">
  <a>Hello</a>
</div>

CSS Code:-
.galf {
  width : 100%;
  height : 45.3%;
  border: 1px solid;
  text-align:center;
}

小提琴链接

https://jsfiddle.net/y59o0rjc/

对于垂直对齐，只需对css稍作更改： -

.galf {
  width : 100%;
  height : 45.3%;
  border: 1px solid;
  text-align:center;
  display: table;
}

.galf a {
  display: table-cell;
  vertical-align: middle;
}

Answer 4

如果您尝试水平对齐：

.galf {
width : 100%;
height : 45.3%;
text-align: center;
}

 <div class = "galf">
 <a>Hello</a>
 </div>

如果你想垂直居中

.galf {
width : 100%;
height : 45.3%;
line-height: 45.3%;
}

 <div class = "galf">
 <a>Hello</a>
 </div>

无法在固定高度div中对齐文本

4 个答案: