<a>在div中</a>垂直对齐<a>文本</a>

Question

I am having trouble vertically aligning the 's text inside a div.

This is what I have. I need to center "Next" inside the blue box:

 @import url(http://fonts.googleapis.com/css?family=Muli); /*Makes the little side arrow*/ .open { position: fixed; width: 100px; height: 40px; left: 50%; top: -1000px; margin-left: -80px; margin-top: -30px; border: 1px solid #ccc; background-color: #fff; border-radius: 6px; padding: 10px 30px; color: #444; transition: all ease-out 0.6s; } .open:hover { border: 1px solid #aaa; box-shadow: 0 0 8px #ccc inset; transition: all ease-out 0.6s; } .tutorial-box { position: fixed; width: 400px; height: 238px; top: 75px; background-color: #F3F3F3; border-radius: 6px; box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4); } .slider-turn p, .tutorial-box h1{ margin-left: 10px; } .tutorial-box:before { content: ''; position: absolute; left: -14px; top: 28px; border-style: solid; border-width: 10px 14px 10px 0; border-color: rgba(0, 0, 0, 0) #f3f3f3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } .tutorial-box p { width: 350px; font-size: 16px; color: #a8aab2; font-weight: 400; line-height: 28px; float: left; margin: 0; } .tutorial-box .bottom { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; bottom: 0; position: absolute; } .tutorial-box .bottom .btn-2 { flex: 3; -webkit-flex: 3; -ms-flex: 3; width: 100%; height: 54px; background-color: #373942; border-bottom-left-radius: 6px; display: flex; } .tutorial-box .bottom span { flex: 1; -webkit-flex: 1; -ms-flex: 1; line-height: 54px; color: #fff; margin-left: 25px; font-size: 18px; } .next { text-decoration: none; display: inline-block; vertical-align: middle; text-align: center; flex: 1; background-color: #6cb5f3; border: 0; margin: 0; padding: 0; text-transform: uppercase; color: #fff; font-weight: bold; border-bottom-right-radius: 6px; cursor: pointer; transition: all .3s; } .next:hover { text-decoration: none; background-color: #6BA5D6; transition: all .3s; } .next:active { text-decoration: none; background-color: #5F8AAF; } .slider-tutorial-box { width: 350px; margin: 0 25px; overflow: hidden; } .slider-turn { width: 10000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- TUTORIAL --> <div class="tutorial-box"> <h1>Welcome</h1> <span class="close"></span> <div class="slider-container"> <div class="slider-turn"> <p> Here, under the Company tab, is where you will do most of the company managment.<br> </p> </div> </div> <div class="bottom"> <div class="btn-2"> <span>Step 2/?</span> </div> <a href="/tutorial/3" class="allowedLink next">Next</a> </div> </div> 

Please let me know how I can center the text vertically to the center of the div.

Thank you very much. Let me know if I wasn't clear enough.

Answer 1

the simplest and possibly most easy way would be to add the 'center' and '/center' tag before and after the text you want, and after each letter use '/br' to move to the next line. this will add some bulk, but would be considerably easier than other methods.

<center>
    'letter'</br>'next letter'</br>'next letter'</br>
</center>

repeating the letter and break for all letters

Answer 2

alternatively, you could also add "div" tags around the "a" tag. you would have to modify the 'height' and 'width' to make it vertical for you. I would use px for this and not '%' or 'em'. add this to them:

<div style="height: /* modify this */100px; width: /* and this*/20px;">
    <a href="/tutorial/3" class="allowedLink next">Next</a>
</div>

this may not be AS compatible cross platform though.

Answer 3

Seems like you already did that for .tutorial-box .bottom span so, do the same thing for .next

.next{
  line-height: 54px;
}

Answer 4

Like this:

.next { position: relative; top: 50%; transform: translateY(-50%); }

A nice trick that works both vertically and horizontally.