[英]Vertically align span in a div
我正在嘗試使用Bootstrap 4的對齊幫助器類在div中垂直對齊內容“ ABC Company”。 但無法做到。 我正在使用以下代碼。
<div class="container" style="width: 740px;">
<div class="row">
<div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
Your Account
</div>
</div>
<div class="row">
<div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
<span class="align-middle">ABC Company</span>
</div>
</div>
請指出我想念的是什么!
設置display: flex; justify-content: center; align-items: center;
display: flex; justify-content: center; align-items: center;
對於col-sm text-center
或 ,也可以設置display: flex; justify-content: center;
display: flex; justify-content: center;
對於col-sm text-center
和align-self: center;
對於<span>
。
.col-sm.text-center { display: flex; justify-content: center; align-items: center; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <style> </style> <div class="row"> <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;"> Your Account </div> </div> <div class="row"> <div class="col-sm text-center" style="background-color:#0471AF; height:100px;"> <span class="align-middle">ABC Company</span> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.