css 在div中居中对齐按钮[复制]

mzaanser 于 2023-05-23 发布在其他

关注(0)|答案(4)|浏览(180)

此问题已在此处有答案：

How can I horizontally center an element?（134回答）
How to center a button within a div?（13个回答）
How to remove the space between inline/inline-block elements?（41答案）
Flexbox: center horizontally and vertically（14个回答）
3天前关闭。
我试图在一个div中居中对齐10个按钮。
当它们形成新的一行时，按钮之间的空间变得不均匀。

.r-btn {
  border-radius: 5%;
  padding: 5px;
  margin: 1px;
  width: 149px;
  height: 79px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  color: white;
}

.r-btn:hover .r-btn:focus {
  transition: 0.8s;
  transform: scale(1.2);
}

<div style="text-align:center; width:50%;">

  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>

  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>

  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>

  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>

  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>

  <button class="r-btn" style="background:#b17431">Right to Education</button>

  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>

  <button class="r-btn" style="background:#353a29">Right to Health</button>

  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>

  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatement</button>

</div>

当我浮动他们离开的间距得到固定，但他们不中心对齐。我做错了什么？如何解决此空间问题？

css

来源：https://stackoverflow.com/questions/76293623/center-aligning-buttons-in-a-div

4条答案

按热度按时间

fiei3ece1#

你可以使用flexbox。下面是代码的更新版本：
CSS代码：

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
  }

  .r-btn {
    border-radius: 5%;
    padding: 5px;
    margin: 1px;
    width: 149px;
    height: 79px;
    font-size: 10px;
    font-weight: 700;
    border: none;
    color: white;
  }

  .r-btn:hover,
  .r-btn:focus {
    transition: 0.8s;
    transform: scale(1.2);
  }

HTML代码：

<div class="container">
  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>
  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>
  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>
  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>
  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>
  <button class="r-btn" style="background:#b17431">Right to Education</button>
  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>
  <button class="r-btn" style="background:#353a29">Right to Health</button>
  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>
  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatment</button>
</div>

赞(0）回复(0）举报 2023-05-23

jxct1oxe2#

你可以使用flexbox如下代码：

Div.parent {
      Display: flex;
      Justify-content: center;
      Gap: 16px;
      Align-items: center;
      Flex-wrap: wrap;
    }

赞(0）回复(0）举报 2023-05-23

vwoqyblh3#

这是你期望的输出吗？我使用了wrap，这样div就变小了。

.r-btn {
  border-radius: 5%;
  padding: 5px;
  margin: 1px;
  width: 149px;
  height: 79px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  color: white;
}

.r-btn:hover .r-btn:focus {
  transition: 0.8s;
  transform: scale(1.2);
}

.chngStyle{
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

<div class="chngStyle" style="text-align:center; width:50%;">

  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>

  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>

  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>

  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>

  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>

  <button class="r-btn" style="background:#b17431">Right to Education</button>

  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>

  <button class="r-btn" style="background:#353a29">Right to Health</button>

  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>

  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatement</button>

</div>

赞(0）回复(0）举报 2023-05-23

yc0p9oo04#

div {
display: flex;
justify-content: center;
flex-direction: column;
align-items:center;
width: 100%;
gap:6px;
}
a {
display:block;
}
div > a,button {
 width: 300px;
 height: 60px
}

<div>

  <a href="#"><button class="r-btn" style="background:#46a7a2">Right to Freedom from Segregation</button></a>

  <button class="r-btn" style="background:#c6d9df">Right to Life and Personal Liberty</button>

  <button class="r-btn" style="background:#e7a564">Right to Fair Access to Justice</button>

  <button class="r-btn" style="background:#b17431">Right to Livelihood and Social Security</button>

  <button class="r-btn" style="background:#c25469">Freedom of Speech and Expression</button>

  <button class="r-btn" style="background:#b17431">Right to Education</button>

  <button class="r-btn" style="background:#8bae7c">Right to Marriage</button>

  <button class="r-btn" style="background:#353a29">Right to Health</button>

  <button class="r-btn" style="background:#f1aab2">Freedom of Speech, Expression, and Religion</button>

  <button class="r-btn" style="background:#eae1a9">Right Against Torture and Degrading Treatement</button>

</div>

赞(0）回复(0）举报 2023-05-23

我来回答

css 在div中居中对齐按钮[复制]

4条答案

相关问题

热门标签

最新问答