收藏
回答

求教样式大佬,被难住了


.icon3{

display: flex;

align-items: center;

justify-content: center;  

width: 100px;

height: 100px;

/* margin-left: -8%; */

margin-top: 150rpx;

border-radius: 500px;

float: left;

}

.shuxian{

width: 8px;

height: 200px;

float: left;

margin-left: 40rpx;

margin-top: 40rpx;

}

.ziti1{

color: black;

font-size: large;

margin-left: 30rpx;

margin-top: 20rpx;

float: left;

}



<view>

<image class='shuxian' src='../images/shuxian.png'></image>

<text class='ziti1'>上班时间 8:30</text>

<button type='primary' class='icon3'>上班打卡8:30</button>

</view>

这是代码,想实现“上班打卡”这个按钮水平居中,但是一直没有效果

最后一次编辑于  2018-12-27
回答关注问题邀请回答
收藏

3 个回答

  • Simon
    Simon
    2018-12-29

    按钮外面套一个view,

    width:750rpx,

    position:relative,

    display:flex,

    justify-content: center,


    2018-12-29
    赞同 1
    回复
  • yyw
    yyw
    2018-12-28

    .icon3{

    position: absolute;

    top: 150rpx;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    }这样可好?



    2018-12-28
    赞同
    回复 16
    • 夏目_侯雨伯
      夏目_侯雨伯
      2018-12-28

      你是没注意字的旁边还有一条竖线吧,那是一张竖着的图片,没有这张图片我也可以实现居中,问题就在这张图上,加了这张图我就不知道咋弄了,就那个蓝色的小点


      2018-12-28
      回复
    • yyw
      yyw
      2018-12-28回复夏目_侯雨伯

      这个是绝对定位的啊,不会影响到其他元素的啊,是相对于整体页面定位的

      2018-12-28
      回复
    • yyw
      yyw
      2018-12-28回复夏目_侯雨伯

      你看,我这里放了一张图片也没有影响的

      2018-12-28
      回复
    • 夏目_侯雨伯
      夏目_侯雨伯
      2018-12-28回复yyw

      虽然我已经解决了,但还是非常感谢回答,谢谢!

      2018-12-28
      回复
    • 夏目_侯雨伯
      夏目_侯雨伯
      2018-12-28回复yyw

      绝对定位不是需要有父元素是相对定位吗,那父元素是哪个

      2018-12-28
      回复
    查看更多(11)
  • 怀中猫~
    怀中猫~
    2018-12-27

    你试一下line-height呢,给100试试

    2018-12-27
    赞同
    回复 4
    • 夏目_侯雨伯
      夏目_侯雨伯
      2018-12-27

      不行啊,我给文字设置了宽度,按钮会在下面显示,但是还是不能设置水平居中,我想问下,如果要设置这些居中之类的,必须要设置弹性布局flex吗


      2018-12-27
      回复
    • 怀中猫~
      怀中猫~
      2018-12-27

      我的错,我理解错了,我给看成文字居中了,你可以选择定位,left: 50%; margin-left: 负的元素宽度的一半;

      或者用margin:0 auto;

      经过亲身试验,这两种方法在小程序中都可以实现水平居中

      2018-12-27
      回复
    • 怀中猫~
      怀中猫~
      2018-12-27

      定位的是父元素相对定位,当前元素是绝对定位

      2018-12-27
      回复
    • 夏目_侯雨伯
      夏目_侯雨伯
      2018-12-28回复怀中猫~

      真的非常感谢!

      2018-12-28
      回复