在一个div中如何让button按钮垂直居中

很多朋友可能都明白如何让button在div中水平居中，但是垂直居中可能就不是特别明白了，今天小编就来分享下button在div中垂直居中的方法，一起来看看吧！

操作方法

  • 01

    首先我们需要新建一个html5文件，编写html5基础代码！

  • 02

    新建一个div标签，在div标签下编写一个button标签。

  • 03

    为div标签和button标签填写基础样式代码，这里我们为了更好的查看居中情况，将div的背景设置成红色。

  • 04

    我们用浏览器打开页面，可以看到button在div层中的左上角位置。

  • 05

    接下来就是实现垂直居中的方法了，首先我们将div的行高设置成div层的高度，将button的vertical-align属性设置成middle。

  • 06

    刷新网页，发现button已经在div中垂直居中了。 以上就是button按钮在div中垂直居中的方法，你学会了？

赞 (0)

相关推荐

  • 怎样使div中的行内元素的文字垂直居中?

    怎样使div中的行内元素的文字垂直居中?比如<span><a>等元素.最近在做一个项目的时候,遇到一个div行内元素文字垂直居中的问题,来看看我遇到的问题和解决方法吧. 操作方 ...

  • html中如何设置几张图片在一个div里来回切换

    在html中如何设置实现几张图片在一个div里来回切换呢?下面就来给大家介绍一种简单大方的DIV+CSS+JQ自动切换图片的功能特效,一起来看看吧. 操作方法 01 在VS2017项目中添加新项,选择 ...

  • 如何给DevExpress中的Button按钮设置背景颜色

    最近在项目中用到了DevExpress控件,在使用Button控件时觉得自带的背景颜色不好看,就想自己设置一下背景颜色,但是发现DevExpress中Button按钮的背景颜色设置并不像Visual ...

  • unity3d中如何创建UI按钮功能

    unity3d中通过对一个按钮的创建使用,从而了解unity3d中UI的使用. 1.打开unity3d项目"GameObject"--"UI"--"B ...

  • unity3d中怎么创建UI按钮功能?

    unity3d中通过对一个按钮的创建使用,从而了解unity3d中UI的使用. 1.打开unity3d项目“GameObject”--“UI”--“Button”,创建一个按钮. 2.在“Rect T ...

  • 怎么在一个表格中利用链接关联不同的工作簿

    怎么在一个表格中利用链接关联不同的工作簿

    随着科技的发展,越来越多的工作可以利用电脑来完成,当我们在使用表格软件处理工作时,为了更加快捷与方便,我们可以使用链接关联不同的工作簿,接下来就由小编来告诉大家如何操作.具体如下:1.第一步,打开电脑 ...

  • button按钮的属性设置

    在网页中用户交互过程中,按钮是必不可少的重要组件之一,关于它的设计与实现,我们在网页标签中定义为<button type="button"></button> ...

  • 怎样在android中设置点击按钮实现页面跳转

    对于android软件开发初级学习者来说,简单的页面跳转是必学的,下面介绍一点实现页面跳转的方法. 步骤/方法 01 打开android开发软件eclipse. 02 启动中. 03 点击finish ...

  • 在excel中如何在一个图中画柱形图和折线图？

    在制作excel文档时,有时我们需要在一个图中画柱形图和折线图,然而有些小伙伴却不知道怎样在一个图中画柱形图和折线图.这里小编就给大家分享如何在一个图中画柱形图和折线图. 操作方法 01 双击打开ex ...