I am trying to vertically align the button to the middle, so it fits better with the text. I have tried center-block and text-center without any luck. I would like a generic solution so I do not hard-code margin, padding and similar.
Here is my fiddle: http://jsfiddle.net/jhqjumgL/5/ And my code:
<h3>FMUs
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-plus"></span>
</button>
</h3>
You can use Flexbox
h3 { display: flex; align-items: center; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <h3>FMUs <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-plus"></span> </button> </h3>
You could wrap the "FMUs" text in an element and vertical-align
that as well:
h3 > span { vertical-align: middle; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <h3><span>FMUs</span> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-plus"></span> </button> </h3>
The vertical-align
property is relative to siblings, not to the container.
What may be of interest is to divide the area up further so you have more control:
<h3>
<div class="container">
<span class="text">
FMUs
</span>
<span class=="button">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</h3>
And the styles:
button,
textarea {
vertical-align: middle;
}
.container {
display: inline-block;
height: 100px;
}
.text, .button {
vertical-align: middle;
}
What this allows is a better control over your elements and means that you can specify better position as a result.
The fiddle for you to try is here:
You can add margin-bottom
css-property to button
element, for example margin-bottom: 5px;
http://jsfiddle.net/jhqjumgL/26/
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.