htmlayout设计ui 基础篇：[20]button垂直对齐

1、第一，首先来看下，我们今天的问题

1、下面的按钮区域，我们看到红线是垂直对齐的

2、黑线是中间的按钮区域，很明显示，它垂直靠上面几个像素，没有垂直对齐

2、第二，我们来看下代码：

<div .content-max style="border:#f00 1px solid;" >

<button  .button style="border:#000 1px solid;">确定</button>

</div>

了解下代码：

外层的<div></div>就是那个红线的“块”级区域

中间的<button></button>就是黑线的按钮区域

3、第三，在讲解决文案前，我们先来了解一下display

display 属性规定元素应该生成的框的类型

display：block;此元素将显示为块级元素，此元素前后会带有换行符。

而且DIV就是默认是block块线元素～

想一下：div垂直居中，而button不垂直居中，它们之间的区别？

现在我们在：

<style>

button {display：block;}

</style>

现在我们再来看看效果：

button也各div一样，垂直居中了～

4、第四，也就是说，我们只需要加一个样式：button {display：block;}就可以解决这个垂直居中对齐问题了～