瑞瑞哥的博客

关于layUI的layui-input-inline水平居中

关于layUI的layui-input-inline水平居中

最近写一个项目,登录按钮总是不能在页面中间,这让我很头疼:

子元素如图:

子元素

父元素如图:

父元素

明显看出不是我想要的,我想要子元素这300个像素,在父元素这700个像素里面。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="layui-form" action="" id="form_login">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</div>

<div class="layui-form-item">为父元素,<div class="layui-input-inline"为子元素。想要让子元素在父元素水平居中,无论怎么搞都搞不定。

后来查了这个资料,常规套路有6种,我先试了两种最基本的:

  1. 当子元素为display: block时,子元素只要设定宽度,再把左右外填充设置为自动即可,即:

    1
    2
    3
    width: xxxpx;
    margin-left: auto;
    margin-right: auto;

    根据慕课网的这个教程,提到宽度和margin-auto缺一不可

  2. 当子元素为display: inline-block时,只要对父元素设置“子元素居中”即可,即:

    1
    text-align:center

那么我为什么试了2种都不行呢?通过分析css,发现我用的layUI框架,子元素是class="layui-input-inline",这个类用了这个属性,真是喷出一口老血:

1
2
float: left;
position: relative;

知道问题根因之后,解决方法就好办了:

  1. 覆盖css设置,用float布局完成目的
  2. layui-input-inline改为layui-input-block,然后启用上面的方法1
  3. 上面链接中的方法5、方法6估计也是可以用的

前端刚入门,果然还是要多想、多看看资料。