最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】如何让两个div上下排列且第二个div中内容水平居中对齐

JS crifan 745浏览 0评论

之前用代码:

      <div class={style.item}>
        <div>
          <p>牛舍:<span>{name}</span></p>
        </div>
        <div>
          <p>容量:{capacity}</p>
          <p>在舍牛头数:{current_cow_num}</p>
          <label>{cowshedTypeDict[cowshedtype]}</label>
        </div>
      </div>

less:

@import ‘~style/helpers’;
.the_herd_all {
  // display: none;
  // overflow: auto;
  // overflow: scroll;
  // overflow-y: scroll;
}
.item {
  .noUserSelect;
    position: relative;
  display: flex;
    // padding: 0.22rem 1.52rem 0.22rem  0.2rem;
    padding: 0.22rem 0.22rem 0.22rem  0.2rem;
  line-height: 0.46rem;
    color: #535353;
    font-size: 0.28rem;
    border-top: 1px solid #cccac9;
    min-height: 1.0rem;
  > div {
    line-height: 0.46rem;
    // line-height: 0.23rem;
    width: 100%;
    color: #535353;
    font-size: 0.28rem;
    > p,
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
    }
    > label {
      position: absolute;
      bottom: 0.18rem;
      right: 0.3rem;
      display: inline-block;
      min-width: 1.32rem;
      padding: 0 0.06rem;
      height: 0.4rem;
      border: 1px solid #48da6a;
      color: #48da6a;
      font-size: 0.28rem;
      line-height: 0.38rem;
      text-align: center;
      border-radius: 0.04rem;
    }
  }
}
.item > div:first-child {
  // width: 40%;
  width: 50%;
}
.item > div:nth-child(2) {
  // padding-left: .2rem;
  // width: 60%;
  width: 50%;
}
.item span {
  font-size: 0.34rem;
    font-weight: bold;
    color: #007af9;
}
.item > a {
    position: absolute;
    top: 0.37rem;
    right: 0.2rem;
    display: inline-block;
    width: 1.1rem;
    height: 0.6rem;
    background: #007af9;
    color: #fff;
    font-size: 0.28rem;
    line-height: 0.6rem;
    text-align: center;
    border-radius: 0.04rem;
}

效果是:

一个item,一行内,两个div是左右水平排列的

现在希望弄成:上下排列的,这种效果:

div vertical align

div 上下排列

html – Vertical alignment of elements in a div – Stack Overflow

css – How to vertically center a div for all browsers? – Stack Overflow

css – How to vertically center divs? – Stack Overflow

如何上两个div上下排列_百度知道

有两个并排的div,分别上下排列,宽都是100%。上面的div高度固定,下面的div高度要撑满当前浏览器的高度,css怎么写? – 开源中国社区

Z63 | Vertical align anything with just 3 lines of CSS | zerosixthree

后来进过一番调试,基本上达到了效果了:

虽然不是很完美的感觉:基本的布局竟然还要用到translateY,核心代码是:

.verticalAlignCenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

即可实现,三个元素,都是内容上,垂直居中。

后来经过优化后,用:

    display: flex;
    align-items: center;

可以更好的实现效果:

且还可以使得,行内子的第一行,内容也是垂直居中。

【总结】

代码:

reactjs:

      <div class={style.item}>
        <div>牛舍:<span>{name}</span></div>
        <div>
          <p>容量:{capacity}</p>
          <p>在舍牛头数:{current_cow_num}</p>
          <label>{cowshedTypeDict[cowshedtype]}</label>
        </div>
      </div>

less:

@import ‘~style/helpers’;
.the_herd_all {
  // display: none;
  // overflow: auto;
  // overflow: scroll;
  // overflow-y: scroll;
}
// .verticalAlignCenter {
//   position: relative;
//   top: 50%;
//   transform: translateY(-50%);
// }
@innerLineHeight: 0.6rem;
.item {
  .noUserSelect;
    position: relative;
  // display: flex;
    // padding: 0.22rem 1.52rem 0.22rem  0.2rem;
  padding: 0.22rem 0.22rem 0.22rem  0.22rem;
  // padding: 0.1rem 0.22rem 0.1rem  0.2rem;
  //line-height: 0.46rem;
  height: 1.64rem; //1.6 + 0.22 + 0.22
  // height: calc(2*@innerLineHeight + 0.22rem + 0.22rem); //1.6 + 0.22 + 0.22
  // line-height: 0.8rem;
    color: #535353;
    font-size: 0.28rem;
    // border-top: 1px solid #cccac9;
    border-bottom: 1px solid #cccac9;
  min-height: 1.0rem;
  > div {
    // line-height: 0.46rem;
    // line-height: 0.23rem;
    //line-height: 0.3rem;
    height: @innerLineHeight;
    align-content: center;
    width: 100%;
    color: #535353;
    font-size: 0.28rem;
    display: flex;
    align-items: center;
    > p,
    > div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // display: block;
      // display: inline-block;
      display: inline-flex;
      // align-items: center;
      // display: flex;
      // width: 100%;
      width: 39%;
      // .verticalAlignCenter;
    }
    > label {
      display: inline-block;
      // display: inline-flex;
      // min-width: 1.32rem;
      width: 22%;
      padding: 0 0.15rem 0 0.15rem;
      height: 0.4rem;
      border: 1px solid #48da6a;
      color: #48da6a;
      font-size: 0.28rem;
      // line-height: 0.32rem;
      text-align: center;
      // vertical-align : “middle”;
      border-radius: 0.04rem;
      // .verticalAlignCenter;
    }
  }
}
// .item > div:first-child {
//   // width: 40%;
//   // width: 50%;
//   width: 100%;
//   height: 0.4rem;
// }
// .item > div:nth-child(2) {
//   // padding-left: .2rem;
//   // width: 60%;
//   // width: 50%;
//   width: 100%;
//   height: 0.4rem;
// }
.item span {
  font-size: 0.34rem;
    font-weight: bold;
    color: #007af9;
}
// .item > a {
//     position: absolute;
//     top: 0.37rem;
//     right: 0.2rem;
//     display: inline-block;
//     width: 1.1rem;
//     height: 0.8rem;
//     background: #007af9;
//     color: #fff;
//     font-size: 0.28rem;
//     line-height: 0.8rem;
//     text-align: center;
//     border-radius: 0.04rem;
// }

效果:

整行的item

行内,第一个子的行:

行内,第二子行:

然后其中的三个元素:

两个p,一个label,都是内容上,垂直居中了:

转载请注明:在路上 » 【已解决】如何让两个div上下排列且第二个div中内容水平居中对齐

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.227 seconds, using 10.65MB memory