I have a border I am trying to align vertically with some text and every time I try and move it down the rest of my content moves down making it impossible to complete this task. As you can see in my picture below, the border is above the text and I want it vertically aligned.

#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>
It sounds to me like you want it aligned to the middle of the text either side. I would use :before and :after pseudo selectors for this task.
#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>
Just increase or decrease the margin to move the lines closer or further away.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With