Vertically align button in column - html

I'm trying to center my button vertically, but isn't working:
HTML:
<div class="col-md-6 text-right">
<a class="btn btn-small btn-gray" ui-sref="login">Start Session</a>
</div>
CSS:
.btn {
vertical-align: middle;
}

Possible duplicate of How to vertical align middle a button in a dynamic div
But, I think you need to just add
display:inline-block;
to your .btn CSS.

Related

Have group of buttons on same row but separate their alignments

I have a simple div that contains a few anchor tags and a button. I want the first three anchor tags to be aligned to the left, and the button to be aligned to the right. But I want them to be all on the same row. My example shows all four elements to the right. How can I achieve that? Thanks
Please see
My example
I just want the first three buttons to the left of the page and the last one to the right. However, I want to keep them aligned and on same row.
You can use flexbox for that, there are many ways, one of them is the following :
.extra-buttons {
display: flex;
margin-bottom: 5px;
}
button {
margin-left: auto;
}
Another (cleaner) way would be to wrap your links in a div and apply justify-content: space-between on the .extra-buttons:
HTML:
<div class="extra-buttons">
<!-- How do I align these three anchor tags to the left -->
<div>
<a class="btn">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</a>
<a class="btn">
<span class="glyphicon glyphicon-print"></span> Print
</a>
<a class="btn">
<span class="glyphicon glyphicon-plus"></span> Add
</a>
</div>
<!-- But keep this at the right (end) -->
<button>Reset</button>
</div>
CSS:
.extra-buttons {
display: flex;
justify-content : space-between
margin-bottom: 5px;
}

Vertically and horizontally align content whilst still being responsive

I currently have a simple one page website which displays a logo, 4 short lines of text and 2 buttons which are side by side. I'm using Bootstrap 4.
I have already tried many solutions posted on stack overflow but haven't found a fix.
I am trying to align all of the content horizontally and vertically whilst still being responsive so it is in the middle of the screen on all devices. Would be good to have no scroll however i'm guessing scroll may be required especially on smaller devices such as iPhone SE so that's ok.
The closest I have got is with the code below. This centers correctly however for example, on iPhone SE the logo and buttons are cut off at the top and bottom of the page rather than resizing like responsive should do.
css:
html, body {
height: 100%;
font-family: Arial, sans-serif !important;
overflow:auto;
}
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
html:
<div class="container">
<div style="padding:15px;" class="row">
<div class="col text-center">
<center>
<img src="assets/img/logo.png" class="logo" />
<br>
<br>
<p style="margin-top:1rem;" class="big">text</p>
<p>text<br>text<br>text</p><p>text<br>text<br>text</p>
<p class="no-margin">PURCHASE TICKET INSTANTLY ONLINE</p>
<p class="big">OR</p>
<p>RESERVE AND PAY ON ENTRY</p>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<a href="purchase">
<button style="background-color: #db0e0e !important;border:none; line-height: 130%;" class="btn btn-danger btn-md center-block">PURCHASE
<br>TICKET ONLINE</button>
</a>
<a href="purchase"><button style="background-color: #ffffff !important;color: #db0e0e !important;border:none; line-height: 130%;" class="btn btn-danger btn-md center-block">RESERVE
<br>PAY ON ENTRY</button></a>
</div>
</div>
</center>
</div>
</div>
</div>
Flex. See my jsfiddle.
The key is to center both axes with nested flex <div>'s one with a flex-direction of column and one of row, both with justify-content: center. The key "gotcha" with flex is that at least one of the first flex div has to have height: 100%, since flex elements' default height are determined by their contents, not their parent height.

Button styled as a glyphicon, with text inside?

I´m new here, and I have a bit of a struggle with a, most lightly, simple problem.
I want to use the glyphicon-arrow-right, as a button, with the text "to test" centered inside it, is there an easy way to do this? I have this code line atm:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a class="btn btn-default" style="color:green" href="textview" id="totestarrow">
<span style="font-size:10em;" class="glyphicon glyphicon-arrow-right">
</span><br>Til testene
</a>
</div>
With this I get a green arrow pointing right, with the text centered underneath it. so how do I manage to put it inside of the arrow?
Thanks!
You can set your button to use position:relative, which will cause all of the elements within it to be positioned relative to it and simply use position:absolute on your actual <span> containing your text and adjust the top and left properties to get it in the proper position :
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a class="btn btn-default" style="color:green; position: relative;" href="textview" id="totestarrow">
<span style="font-size:10em;" class="glyphicon glyphicon-arrow-right"></span>
<span class='centered-text'>
Til testene
</span>
</a>
</div>
<style>
.centered-text {
/* This will cause your element to be positioned freely over it's container */
position: absolute;
/* This will bring the element roughly halfway down the existing element */
top: 47%;
/* Colored white to stand out */
color: white;
/* The following styles will center the element in it's container */
text-align: center;
left: 0;
width: 100%;
}
</style>
You can see an example of this here and the output demonstrated below :

Bootstrap 3 - Align font-awesome icon inside button vertically

I am trying to align some font-awesome arrow vertically inside two Bootstrap buttons.
Actually both the text and the icons should be vertically aligned in the middle of the button.
If the text inside falls into a single line or wraps in multiple ones the arrow icon should always adjust to the middle of the total height of the button, if that makes sense.
I've been trying to sort this one out for hours now but for the life of me I can't figure this out.
Here's the markup:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<button type="button" class="btn btn-block btn-foo1"><span> this is <br>button<br>one</span><i class="icon-angle-right"></i></button>
<button type="button" class="btn btn-block btn-foo2"><span>this is button two</span><i class="icon-angle-right"></i></button>
</div>
</div>
and here's a jsFiddle (updated) with what I currently have. Please note that the red background of the icons should touch the edges of the button (top/bottom/right) as opposed to what it is now.
Set both elements to display inline-block and then set the span to take up a percentage of the space. In this case 90% / 10% seems to work good.
span {
vertical-align:middle;
display:inline-block;
width:90%;
}
To remove the padding you can do this: (probably want to add a some left padding)
.btn-foo1,
.btn-foo2 {
padding:0;
border:0;
}
Change display to inline block, and remove right float:
.btn-foo1 [class^="icon-"],
.btn-foo2 [class^="icon-"],
.btn-foo1 [class*=" icon-"],
.btn-foo2 [class*=" icon-"] {
background-color: red;
display:inline-block;
vertical-align:middle;
padding:24px;
width:10%;
}
Demo:
http://jsfiddle.net/9brbD/19/
Also I would add a class to the span, instead of using span {} use myClass {}.

How to align horizontal buttons to the right?

I would like to make a simple panel with buttons that are placed horizontally and aligned to the right. Willing to align it to the left I can easily do this like that :
.button {
float:left;
background-color: #55cc66;
margin-right: 50px;
padding: 5px;
}
//......
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
But when I do the same with float:right it obviously aligns it to the right but in inverted order. I have also tried text-align: right, position: absolute; right:150; and position: fixed; right:150;. The last two align to the right but awkwardly overlap the 'buttons'.
How can I achieve this then ?
You can remove floats and align the container of your "buttons" to the right with the property text-align.
You don't want your heading to be aligned to the right so you've to cancel it with text-align: left;.
One problem remains: you're using non-semantic div when what you really want are buttons. You should use ... button elements (or maybe input[type"button|image|submit"]).
These ones are focusable and are made for an action taking place when clicked (with mouse, keyboard or tap).
Back to these div: they are displayed as blocks by default, you've to change for inline-block - IE8+.
Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/
Leave the class .button with float left, wrap all your buttons with another division (btn_wrapper) and add a specific width to it and float right. Just make sure that all your buttons fit inside the wrapper
.btn_wrapper{
width:300px;
float:right
}
<div id="switcher">
<h3>Style Switcher</h3>
<div class="btn_wrapper">
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
</div>