主页 / 问题 / 1024317
Accepted
Родион Поляков
Asked:2020-09-14 06:58:13 +0000 UTC2020-09-14 06:58:13 +0000 UTC

为什么要为按钮指定 text-align: center ？

  • 772

text-align: center;如果在视觉上它不影响任何东西，那么为按钮指定什么？这些属性在大多数 CSS 框架中指定。

来自W3Schools.com的示例

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

css

1 个回答

  1. Best Answer

    如果您手动设置宽度，或者如果按钮由于某种原因采用其父级的宽度，则其中的文本text-align: center将始终居中。

    对于一个按钮<button>和input那些设置，type这真的不会影响任何事情，因为默认情况下，已经设置了居中。

    .block{
  width: 100%;
}

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: inherit;
  margin-bottom: 5px;
  box-sizing: border-box;
  font-family: sans-serif;
}

.center {
  text-align: center;
}
    <div class="block">
  <div>Button: </div>
  <button class="btn">Кнопка</button>

  <button class="btn center">Кнопка</button>
</div>

<div class="block">
  <div>Input: </div>
  <input class="btn" value="Кнопка">
  
  <input class="btn center" value="Кнопка">
  
  Но при submit или button:
  <input type="button" class="btn" value="Кнопка">
</div>

<div class="block">
  <div>a: </div>
  <a href="#" class="btn">Кнопка</a>
  
  <a href="#" class="btn center">Кнопка</a>
</div>

    • 0

相关问题