Vertically align span in a div
12,229
Set display: flex; justify-content: center; align-items: center;
for col-sm text-center
or, alternatively, set display: flex; justify-content: center;
for col-sm text-center
and align-self: center;
for <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>
Related videos on Youtube
Author by
Jestino Sam
Updated on September 21, 2022Comments
-
Jestino Sam over 1 year
I am trying to vertically align the content "ABC Company" in a div using Bootstrap 4's alignment helper classes; but unable to do so. I am using the below code.
<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>
Please point out what am I missing !
-
mickro over 6 yearsif you are planning to have an image... use an image. It is much easier. Then play with
padding-top
,padding-bottom
,margin-top
,margin-bottom
.
-