Div中的垂直对齐文本与行相关

时间：2017-09-22 13:27:20

标签： html css twitter-bootstrap

我正在努力调整文字＆＃34;地址＆＃34;在左边div垂直。但我无法做到。

这是代码，

＆＃13;
＆＃13; 
div.row {
  border: 1px solid black;
  padding: 10px;
}

.centre {
  display: block;
  text-align: center;
  vertical-align: middle;
  background: yellow;
  height: 100%;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 centre">
      <label>Address</label>
    </div>
    <div class="col-md-6">
      <div class="row">
        <!--nested row one-->
        <div class="col-md-6">
          <label>Street</label>
        </div>
        <div class="col-md-6">
          <input name="stname">
        </div>
      </div>
      <div class="row">
        <!--nested row two-->
        <div class="col-md-6">
          <label>Landmark</label>
        </div>
        <div class="col-md-6">
          <input name="lmark">
        </div>
      </div>
      <div class="row">
        <!--nested row three-->
        <div class="col-md-6">
          <label>Zip code</label>
        </div>
        <div class="col-md-6">
          <input name="zipcode">
        </div>
      </div>
    </div>
  </div>
  <!--row end-->
</div>
＆＃13;
＆＃13;
＆＃13;

我做错了什么。我正在使用bootsrap 3。

Plunker：https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview（全屏查看Plunker）

我试图得到与此类似的结果。彩色边框仅用于表示enter image description here。

6 个答案:

答案 0 :(得分：0)

您将样式设置为中心div，而不是它应该是中心div内的标签

enter image description here 

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="script.js"></script>
  <style>
    div.row div{
      border: 1px solid black;
      padding: 10px;
    }
    .centre label{
      display: block;
      text-align: center;
      vertical-align: middle;
      background: yellow;
      height: 100%;
      padding:5px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 centre">
        <label>Address</label>
      </div>
      <div class="col-md-6">
        <div class="row"><!--nested row one-->
          <div class="col-md-6">
            <label>Street</label>
          </div>
          <div class="col-md-6">
            <input name="stname">
          </div>
        </div>
        <div class="row"><!--nested row two-->
          <div class="col-md-6">
            <label>Landmark</label>
          </div>
          <div class="col-md-6">
            <input name="lmark">
          </div>
        </div>
        <div class="row"><!--nested row three-->
          <div class="col-md-6">
            <label>Zip code</label>
          </div>
          <div class="col-md-6">
            <input name="zipcode">
          </div>
        </div>
      </div>
    </div><!--row end-->
  </div>
</body>

</html>

答案 1 :(得分：0)

Code Pen

您可以移除偏移并将其与12网格系统匹配。

＆＃13;
＆＃13; 
div.row {
  border: 1px solid black;
  padding: 10px;
}

.centre {
  background: yellow;
  top: 60px;
  border: 1px solid blue;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-3 centre">
      <label>Address</label>
    </div>

    <div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
      <!--You can remove style and remove offset and change it to sm-9 -->
      <div class="row">
        <!--nested row one-->
        <div class="col-xs-6">
          <label>Street</label>
        </div>
        <div class="col-xs-6">
          <input name="stname">
        </div>
      </div>
      <div class="row">
        <!--nested row two-->
        <div class="col-xs-6">
          <label>Landmark</label>
        </div>
        <div class="col-xs-6">
          <input name="lmark">
        </div>
      </div>
      <div class="row">
        <!--nested row three-->
        <div class="col-xs-6">
          <label>Zip code</label>
        </div>
        <div class="col-xs-6">
          <input name="zipcode">
        </div>
      </div>
    </div>
  </div>
  <!--row end-->
</div>
＆＃13;
＆＃13;
＆＃13;

至于现在，margin-top值得尝试。

答案 2 :(得分：0)

这是一个解决方案，设置未嵌套的列上的上边距/填充，然后取消嵌套的上边距/填充：

Plunkr

相关CSS：

[class*="col-"] {
  border: 1px solid black;
  padding: 10px;
}
.row:first-child [class*="col-"] {
  margin-top: 10px;
  background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
  margin-top: -10px;
  background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
  margin-top: 0;
  background-color: lightblue;
}

@codegeek避免这些问题的解决方案更好imho：）

答案 3 :(得分：0)

您可以在CSS文件中添加此代码以获得vertical-align。 但首先，您必须添加一个带有行类

的新类 
    <!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="script.js"></script>
  <style>

   .vertical > div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.vertical > div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}
    div.row div{
      border: 1px solid black;
      padding: 10px;
    }
    .centre label{
      display: block;
      text-align: center;
      vertical-align: middle;
      background: yellow;
      height: 100%;
      padding:5px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row vertical">
      <div class="col-md-3 centre">
        <label>Address</label>
      </div>
      <div class="col-md-6">
        <div class="row"><!--nested row one-->
          <div class="col-md-6">
            <label>Street</label>
          </div>
          <div class="col-md-6">
            <input name="stname">
          </div>
        </div>
        <div class="row"><!--nested row two-->
          <div class="col-md-6">
            <label>Landmark</label>
          </div>
          <div class="col-md-6">
            <input name="lmark">
          </div>
        </div>
        <div class="row"><!--nested row three-->
          <div class="col-md-6">
            <label>Zip code</label>
          </div>
          <div class="col-md-6">
            <input name="zipcode">
          </div>
        </div>
      </div>
    </div><!--row end-->
  </div>
</body>

</html>

答案 4 :(得分：0)

我使用top来定位左div：50％（取父级的高度）然后使用translateY，它取当前元素的高度。

由于相对定位没有取％值，我使用绝对值。 但是给出绝对值会使div从文档流中流出，因此使用“左”来表示右兄弟与左兄弟的宽度。

.parent{
  position: relative;
}
.centre{
  background: yellow;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.right{
  left: 25%;
  /* width of left sibling, since col-md-3 is 25%*/
  background: lightgreen;
}

Plnkr Link（带引导程序）或JsFiddle（不带引导程序）

结果：

Result

答案 5 :(得分：-1)

您的vertical-align:middle不起作用，因为display: block的元素无法以此方式居中。一个简单的替代方法是使用display: flex。

这是一个演示显示方式的片段：flex可用于集中几乎所有内容：

    div.row div{
      border: 1px solid black;
      padding: 10px;
    }
    .centre{
      display: block;
      text-align: center;
      vertical-align: middle;
      background: yellow;
      height: 100%;
    }
    .flex {
    display: flex;
    align-items: center;
    }
  <div class="container-fluid">
    <div class="row">
      <div class="flex">
      <div class="col-md-3 centre">
        <label>Address</label>
      </div>
      <div class="col-md-6">
        <div class="row"><!--nested row one-->
          <div class="col-md-6">
            <label>Street</label>
          </div>
          <div class="col-md-6">
            <input name="stname">
          </div>
        </div>
        <div class="row"><!--nested row two-->
          <div class="col-md-6">
            <label>Landmark</label>
          </div>
          <div class="col-md-6">
            <input name="lmark">
          </div>
        </div>
        <div class="row"><!--nested row three-->
          <div class="col-md-6">
            <label>Zip code</label>
          </div>
          <div class="col-md-6">
            <input name="zipcode">
          </div>
        </div>
      </div>
      </div>
    </div><!--row end-->
  </div>

编辑：也许本指南可能对您感兴趣： Centering in CSS: A Complete Guide

相关问题
最新问题