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

Question

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

14

我有一个这样的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中。
- 将OrderNo水平左对齐于此div（且垂直居中）。

如何实现？

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

- Jasper

"align" 不是 CSS 属性，请使用 "text-align"。而对于垂直对齐，请使用 "line-height" 属性。 - Marc Bellêtre

2个回答

0

名称

将标签和文本字段对齐 -

.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>

- Ajay Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ketan · Accepted Answer

以下 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>