html – 将标签对齐到DIV中的中心位置和左侧位置

发布时间：2020-12-14 22:58:59 所属栏目：资源来源：网络整理

导读：我有这样的DIV：我在尝试着：将OrderName水平和垂直对齐div的中心. 在div的水平左侧(垂直居中)对齐OrderNo. 我怎样才能做到这一点？ ---------------------------------- | | | OrderNo OrderName | | | ---------------------------------- 最佳答案以下

我有这样的DIV：


我在尝试着：
 – 将OrderName水平和垂直对齐div的中心.
 – 在div的水平左侧(垂直居中)对齐OrderNo.
我怎样才能做到这一点？

    ----------------------------------
   |                                 |
   | OrderNo     OrderName           |
   |                                 |
    ----------------------------------


最佳答案
以下css将给出您的预期结果：

div {
    text-align: center;
}
#orderName {
    vertical-align: middle;
}
#orderNo {
    float: left;
}
 

解决方案2：
使用display的其他方式：flex.在这里,我添加了高度和边框来显示垂直中心.
并给予保证金：0自动;到中心.

div {
    align-items: center;
    display: flex;
    height: 40px;
  border: 1px solid;
}


#orderName {
    order: 2;
    margin:0 auto;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!