时间戳

首页 > 解决方案 > 如何放置框的按钮中心

html - 如何放置框的按钮中心

问题描述

我有一个 div，我想在它的中心放置一个按钮。

1-我应该为按钮使用什么代码？<p?> <span?> <button?> （我觉得不好。我想要一个没有任何边框和点击动作的标签）

2-如何将其放置在 div 的中心？

（我想给那个按钮一个背景颜色，因此当我使用背景颜色时，所有的行都被占用了）

.box {
    width: 280px;
    height: 300px;
    background-color: rgb(221, 20, 20);}
    .button {
    background-color: rgba(57, 133, 57, 0.1);
    font-size: 13px;
 }
<div class="box">
<p class="button">Read More</p></div>

标签： htmlcss

解决方案

如果您不想要任何点击操作或边框，请使用div标签。

要居中.button，请尝试flexbox通过将这些属性添加到.box类中来使用：

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


.box {
  width: 280px;
  height: 300px;
  background-color: rgb(221, 20, 20);
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  background-color: rgba(57, 133, 57, 0.1);
  font-size: 13px;
}
<div class="box">
  <div class="button">Read More</div>
</div>

推荐阅读