中心的文本对齐

-2

这是我的文本CSS，但文本不在中心。请给我解释为什么它不在中心。中心的文本对齐

.button { 
      background-color: #338DFF; 
      border: none; 
      width : 15px; 
      height : 15px; 
      color: white; 
      border-style: solid; 
      line-height: 2px; 
      border-color: white; 
      padding: 15px 32px; 
      text-align: center; 
      text-decoration: none; 
      margin: 4px 2px; 
      font-size: 16px; 
      cursor: pointer; 
     }

来源

2017-02-03 David

它是'padding'属性 – Laazo

您是否尝试过text-align：center！important; –

当处理CSS问题时，通常以“我需要移除哪些东西”开头为佳 - 更简单有时更好 –

它的中心问题是宽度，你可以看到你只有15像素显示的文字和文字大到溢出区域，看起来不是居中

.button { 
 
      background-color: #338DFF; 
 
      border: none; 
 
      /*width : 15px; This is setting a small area for the text*/ 
 
      height : 15px; 
 
      color: white; 
 
      border-style: solid; 
 
      line-height: 2px; 
 
      border-color: white; 
 
      padding: 15px 32px; 
 
      text-align: center; 
 
      text-decoration: none; 
 
      margin: 4px 2px; 
 
      font-size: 16px; 
 
      cursor: pointer; 
 
     }

<button class="button">test</button>

来源

2017-02-03 13:00:02

非常感谢您的帮助 – David

这是因为padding和height财产。删除它们，并给予所需的高度和宽度。

.button { 
 
      background-color: #338DFF; 
 
      border: none; 
 
      width : 75px; 
 
      height : 20px; 
 
      color: white; 
 
      border-style: solid; 
 
      border-color: white; 
 
      text-align: center; 
 
      text-decoration: none; 
 
      margin: 4px 2px; 
 
      font-size: 16px; 
 
      cursor: pointer; 
 
     }

<div class="button"> button </div>

来源

2017-02-03 12:58:14

添加vertical-align: middle;

.button { 
 
      background-color: #338DFF; 
 
      border: none; 
 
      width : 75px; 
 
      height : 20px; 
 
      color: white; 
 
      border-style: solid; 
 
      border-color: white; 
 
      text-align: center; 
 
      text-decoration: none; 
 
      margin: 4px 2px; 
 
      font-size: 16px; 
 
      cursor: pointer; 
 
      vertical-align: middle;/*Added This**/ 
 
     }

<div class="button"> button </div>

来源

2017-02-03 12:59:42

删除width就是这样

.button { 
 
      background-color: #338DFF; 
 
      border: none; 
 
      height : 15px; 
 
      color: white; 
 
      border-style: solid; 
 
      line-height: 2px; 
 
      border-color: white; 
 
      padding: 15px 32px; 
 
      text-align: center; 
 
      text-decoration: none; 
 
      margin: 4px 2px; 
 
      font-size: 16px; 
 
      cursor: pointer; 
 
      
 
     }

<button class="button">Button</button>

来源

2017-02-03 13:01:32

Easiets方式;更改例如您的填充值使用，

padding: 15px 38px 15px 32px;

数值上，右，下，左。

来源

2017-02-03 13:03:44 CodeJam

您正在给高度，宽度，线高和填充填充。填充高度和宽度有时会增加元素的大小。对于你的情况只是删除宽度，文本将中央对齐。

来源

2017-02-03 13:21:07

中心的文本对齐

回答

相关问题