最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】ReactJS中css中div中span的水平居中问题

CSS crifan 5663浏览 0评论

折腾:

【记录】ReactJS中参考spring-picker自己去实现弹框选择

期间,遇到个css的问题

一个div下面,已有2个span,对应着2个左右的按钮

然后想要在其中间加个标题,文字是居中对齐

然后就去尝试。

试了半天,不论是加个span或h2,都无法完美的实现水平居中,

调试到最后,暂时是用了p,加上margin-left的属性,才能实现左边一定的间距

对于iPhone6之类的设备,看起来是比较居中的效果:

代码:

ucowsapp/src/components/popup/index.js

    return (
      <BaseModal
        onCancel={this.handleCancel}
        visible={this.props.visible}>
          <div class={style.ui_popup_title}>
            <span onClick={this.handleCancel}>{cancelTitle}</span>
            <p>{this.state.centerTitle}</p>
            <span onClick={this.handleConfirm}>{confirmTitle}</span>
          </div>
          <div class={style.ui_popup_content}>
            {this.props.children}
          </div>
      </BaseModal>
    );

ucowsapp/src/components/popup/style.less

.ui_popup_title {
  height: 44px;
  font-size: 17px;
  background: #ccc;
  padding: 0 10px;
  line-height: 44px;
  > span:first-child {
    display: inline-block;
    float: left;
    color: #007aff;
    // width: 60px;
    // text-align: center;
    // position: absolute;
    // left: 0;
    // top: 0;
  }
  > span:last-child {
    display: inline-block;
    float: right;
    color: #007aff;
    // width: 60px;
    // text-align: center;
    // position: absolute;
    // right: 0;
    // top: 0;
  }
  > p {
    margin-left: 80px;
    top: 0px;
    bottom: 0px;
    // left: 60px;
    // right: 60px;
    height: 44px;
    display: inline-block;
    // height: 0.84rem;
    text-align: center;
    // align: center;
    // line-height: 0.84rem;
    // font-size: 0.32rem;
    color: #272727;
    font-weight: bold;
    // position: relative;
  }
}
.ui_popup_content {
  height: 216px;
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling : touch;
}

看起来是:

如果去掉margin-left属性,就靠左边了:

至于如何更加完美的适配各种设备,都确保此处的标题的文字是居中对齐的

只有等抽空再去研究了。

转载请注明:在路上 » 【未解决】ReactJS中css中div中span的水平居中问题

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.627 seconds, using 22.14MB memory