移动div而不移动其余内容

Question

我有一个边框我试图垂直对齐一些文字，每次我尝试移动它时我的其余内容向下移动，使得无法完成此任务。正如您在下面的图片中看到的那样，边框位于文本上方，我希望它垂直对齐。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

听起来我觉得你希望它与文本中间任意一致。我会使用:before和:after伪选择器来完成这项任务。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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