html标题栏上的按钮

今天要在昨天写好的标题栏上新增按钮，要让按钮出现在标题栏里，所以要将按钮的div写在column的div里

    <div class="column">
        <div class="but1">按钮一</div>
    </div>

我们也给按钮的div一个明显的颜色方便我们观察，并且设定高度与标题栏相同，宽度可以依照需求调整

    <style>
        .but1{
            height: 50px;
            width:100px;
            background-color: rgb(128, 209, 182);
        }
    </style>

这时网页上的效果会如下图

我们再用前面学过的方法将字体美化一下

            color:white;
            font-size: 20px;
            font-weight: 600;

接下来将line-height设为与div相同的50px来达到垂直置中
line-height可以想成是文字的行距，如果打出一篇文章的话每行文字的高度都会是50px，藉此来调整每行文字间的距离，同时也常用来让文字垂直置中

最後将text-align设为center，就可以达到水平置中

如此一来我们就得到一个文字置中的漂亮按钮了