how to make bootstrap icon text and button vertical center in div
Question
I am trying to make the icon, text and button sit in the center of the div vertically.
So, tried to use bootstrap class well, but still not working. Could someone help me on that?
Here is the image to reference:
Css part:
.brl-icon-size { font-size: 2.5em; }
Here is all my code:
<html>
<head>
<title>Index file</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
Sidebar
</div>
<div class="col-md-10 col-md-offset-2 content">
<div class="well well-lg">
<span class="glyphicon glyphicon-file brl-icon-size"></span>
<span>New Message</span>
<div class="pull-right">
Save draft
<button>Publish</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2014-06-30 11:23:20
CSS:
.valign-top {
vertical-align:top;
}
HTML:
<div class="pull-right">
<span class="valign-top">Save draft</span>
<button>Publish</button>
</div>
EDIT 1:
In case you use different font-size properties on aligned elements, then you should specify line-height property.
EDIT 2:
It's easier and more correct to just wrap you icon into small tag:
<small></small>
Or simply using custom modifier class:
.icon-any-size {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.