Question

我是网络开发的初学者。我想制作一个按钮，在两个单独的行上有一个文本和一个图标。由于按钮是矩形的，我希望文本和图标在垂直和水平方向上居中，使它们看起来很漂亮。我该怎么办呢？谢谢。

.typeA {
  width: 80%;
  height: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.typeA span {
  display: inline-block;
}

<div class="wrapper">
  <a href="#" class="btn typeA">
    <span>ABC <br>
    	  <img src="https://placehold.it/60x60" alt="icon" style="width:60px;">
    </span>
  </a>
</div>

Answer 1

检查以下代码

＆＃13;

.typeA{
    width: 80%;
    height: 150px;
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-items:center;
    background:pink;
}

.typeA span{
    display: inline-block;

}

＆＃13;

<div class="wrapper">
  <a href="test1.html" class="btn typeA">
    <span>ABC <br>
      <img src=".." alt="icon" style="width:60px;">
    </span>
  </a>
</div>

＆＃13;

建议您为按钮提供一定的高度（以像素为单位），因为您的高度百分比不会对您的按钮产生任何影响

Answer 2

这个CSS应该这样做：

.typeA {
    display: block;
    width: 80%;
    height: 90%;
    margin:0 auto;
    text-align: center;
}

您应该使用text-align将内容居中。此处不需要flex，因为flex实际上会尝试将多个元素放在一行上。

Answer 3

我使用button和<i>作为假图标。该文字位于span，因此如果您愿意，可以通过span设置文字样式。

<强> HTML

<button>
  <i id="fake"></i>
  <span>Click</span>
</button>

<强> CSS

button {
  width: 100px;
}

#fake {
  width: 15px;
  height: 15px;
  background: #ff0000;
  position relative;
  margin: 0 auto;
}

button span {
  display: block;
  padding: 3px 0;
}

希望你能用它。如果您不想使用button，我会像其他答案一样使用。将width和height设置为<a>，并将文字居中align和图标，如说明的那样。

Answer 4

以下情况应该有效！

在HTML中

<a href="">
 <div class="button">
  <img src="file" height="20px" width="20px"/>
  <div>Click me</div>
 </div>
</a>

在CSS中

.button{
  text-align:center;
  padding:5px;
  background-color:#ddd;
  width:100px;
}
a{
  text-decoration:none;
}

Answer 5

尝试使用这个简单的css来垂直和水平对齐div。

.typeA {
  width: 80%;
  margin:auto;
  height: 90vh;
  align-items: center;
    display: flex;
}
.typeA SPAN{
  margin:auto;
text-align:center;}

<div class="wrapper">
  <a href="#" class="btn typeA">
    <span>ABC <br>
    	  <img src="https://placehold.it/60x60" alt="icon" style="width:60px;">
    </span>
  </a>
</div>

中心文本和锚标记中的图标

5 个答案: