Question

我是CSS新手，这是我制作的第一个按钮，我无法将文字放入按钮。嗯，它在按钮中然而它没有正确对齐。我不知道如何解决这个问题，但这是我的代码

     body {
   font-family: 'Open Sans', sans-serif;
   background-color: #DB1F1F;
  }

  .navbar-menu {
     margin: auto;
     height: 100px;
     width: 95px;
     background-color: green;
     padding: 10px 40px;
     font-size: 25px;
}

  .navbar-menu:hover {
    opacity: 0.5;
}

我不知道它有什么问题，所以有人可以帮忙吗？

哦和：HTML

<!DOCTYPE html>
<html>
 <head>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
   <link type="text/css" rel="stylesheet" href="stylesheet.css" />
   <title>Button</title>
    </head>
<body>
   <center>
     <div class="navbar-menu">HTML/CSS</div>
    </center>
 </body>
</html>

Answer 1

请尝试此代码

<!DOCTYPE html>
<html>
 <head>
 <style type="text/css">
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #DB1F1F;
}
.navbar-menu {
 background-color: green;
    font-size: 25px;
    height: 100px;
    margin: 0 auto;
    padding: 10px 43px;
    width: 150px;
}
.navbar-menu:hover {
    opacity: 0.5;
}
</style>
 <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 <link type="text/css" rel="stylesheet" href="stylesheet.css" />
 <title>Button</title>
 </head>
 <body>
 <div class="navbar-menu"><center>
HTML/CSS
</center></div>
</body>
</html>

Answer 2

根据您使用的按钮元素（div，span，lis），您可以使用：

//use for any element type
text-align: center;

//use only for inline element types e.g. span
vertical-align: middle;

//use for any block element type e.g. div 
//(replace 90 with height of block element)
line-height: 90px;

文字不会进入DIV

2 个答案: