html - 向下移动 div 而不移动其余内容

Question

我有一个边框，我试图与一些文本垂直对齐，每次我尝试将其向下移动时，我的其余内容都会向下移动，从而无法完成此任务。如下图所示，边框位于文本上方，我希望它垂直对齐。

#work {
  color: #a5a5a5;
  font-family: Hobo Std;
  font-size: 1.3em;
  text-align: center;
}
.leftrule {
  border-top: 2px solid #a5a5a5;
  width: 100px;
  margin-left: 30%;
}
.videos {
  margin-top: 50px;
}
.dancer-vid-left {
  background-image: url(images/dancer2.png);
  background-repeat: no-repeat;
  height: 300px;
}
#video1 {
  border: 15px solid #373636;
  box-shadow: 0px 0px 0px 8px rgba(55, 54, 54, .3);
  background-color: #373636;
  width: 480px;
}

<div class="leftrule"></div>
<p id="work">My Work!</p>
</div>
<div class="rightrule"></div>

<div class="row videos">
</div>

<div class="col-md-6">
  <div id="video1">
    <iframe frameborder="0" height="315" src="https://www.youtube.com/embed/Q3bEF0PHR00" width="450"></iframe>
  </div>
</div>

<div class="col-md-6">
  <div id="video2">
    <iframe frameborder="0" height="315" src="https://www.youtube.com/embed/Q3bEF0PHR00" width="450"></iframe>
  </div>
</div>

Answer 1

在我看来，您希望它与文本两侧的中间对齐。我会使用 :before 和 :after 伪选择器来完成这项任务。

#workcontainer {
  text-align: center;  
}
#work {
  color: #a5a5a5;
  font-family: Hobo Std;
  font-size: 1.3em;
  position: relative;
  display: inline-block; /* This element needs to not flow the whole width, so we place it in a container and inline-block this */
}
#work:before, #work:after {
  content: '';
  border-bottom: 2px solid #a5a5a5;
  width: 100px;
  top: 50%;
  position: absolute;
}
#work:before {
  left: 100%;
  margin-left:20px;
}
#work:after {
  right: 100%;
  margin-right:20px;
}

<div id="workcontainer">
  <p id="work">My Work!</p>
</div>

只需增加或减少边距即可将线条移近或移远。