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

Question

我在div中垂直对齐的文本时遇到麻烦。

这就是我所拥有的。 我需要将“下一步”居中在蓝色框中：

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

请让我知道如何将文本垂直居中到div的中心。

非常感谢你。 让我知道我是否还不够清楚。

Answer 1

最简单，也可能是最简单的方法是在所需文本的前后添加“ center”和“ / center”标签，并在每个字母之后使用“ / br”移至下一行。 这会增加一些体积，但比其他方法容易得多。

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

重复字母并中断所有字母

Answer 2

或者，您也可以在“ a”标签周围添加“ div”标签。 您将需要修改“高度”和“宽度”以使其垂直。 我会为此使用px而不是'％'或'em'。 添加到他们：

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

但是，这可能不是与AS兼容的跨平台。

Answer 3

似乎您已经对.tutorial-box .bottom span执行了此操作，所以对.next执行相同的操作

.next{
  line-height: 54px;
}

Answer 4

像这样：

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

一个很好的技巧，可以在水平和垂直方向上工作。