Question

我有这样的DIV：

    <div id="mydiv">
        <label id="orderName" style="align:center;">Order Name</label>
        <label id="orderNo" style="align:left;">Order No</label>  
    </div>

我正在努力：
- 将OrderName水平和垂直对齐div的中心。
- 在div的水平左侧（垂直居中）对齐OrderNo。

我该怎么做？

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

Answer 1

以下css将给出您的预期结果：

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

 <div id="mydiv">
        <label id="orderName" >Order Name</label>
        <label id="orderNo">Order No</label>  
    </div>

解决方案2：

使用display:flex的其他方式。在这里，我添加了height和border来显示垂直中心。

并将margin:0 auto;放在中心位置。

div {
    align-items: center;
    display: flex;
    height: 40px;
  border: 1px solid;
}


#orderName {
    order: 2;
    margin:0 auto;
}

<div id="mydiv">
        <label id="orderName" >Order Name</label>
        <label id="orderNo">Order No</label>  
    </div>

Answer 2

名称

对齐标签和文本字段-

.search-box-container{

  display:flex;
  width:60%
  background: black;
  margin:0 auto;
  font-size:25px;
}

.label{
  margin:auto;
}

input[type=text]{
  height:20px;
}

<html>
    <body>
        <div class="search-box-container">
            <label for="" class="label">Name</label>
            <input type="text" class="searchbox"/>
        </div>
    </body>
</html>

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

2 个答案: