How can I left align help text under a button? The desired functionality is for the help container text to left align with the left side of the button
JSFiddle
<div class="button-container">
<button class="btn btn-primary">
Login with Google
</button>
</div>
<div class="help-container">
<ul>
<li>Because it's easier</li>
<li>Never forget your password!</li>
</ul>
</div>
.button-container {
text-align: center;
}
I've tried making the width of the button the size of the parent div but that isn't my desired outcome. I've also tried adding a div around both the .button-container and .help-container but it takes the width of the parent div
You can put the help-container into the button container and use this CSS:
.button-container {
margin: 0 auto;
width: 180px;
}
.help-container {
text-align: left;
overflow: visible;
}
https://jsfiddle.net/pyjkfxwx/1/
Here my solution using flexbox
CSS:
.container {
display : flex;
flex-direction : column;
align-items : center;
}
HTML:
<div class="container">
<div class="button-container">
<button class="btn btn-primary">
Login with Google
</button>
<ul>
<li>Because it's easier</li>
<li>Never forget your password!</li>
</ul>
</div>
</div>
fiddle
Related
I have a card I want to align the text on the left and the button on the right with space between the two and put it responsive on the devices
knowing that the button I add the backgroud-image
here is what i tried but it is still not responsive
.component {
display: flex;
justify-content: space-between;
}
.link {
display: flex;
justify-content: center;
background-image: url("../../myicon.svg");
background-repeat: no-repeat;
background-size: contain;
background-repeat: no-repeat;
background-position: right;
height: 24px;
width: 64px;
}
<div class="component">
<div>
<span class="">DEV</span>
</div>
<div>
<div class="btn">
<button><a class='link'>Button </a></button>
</div>
</div>
</div>
I think you want something like this (tightly grouped)
<div class="component">
' <span class="link">DEV</span>
<div class="btn">
<button>Button</button>
</div>
</div>
but then
.
.btn {
float : left;
}
or maybe you want the anchor to actually do something, so maybe <a onclick="..." href="...">Dev</a>. Always try to keep it simple. Each component - the container component, the span, the div, the button, the anchor should have its own thing. I can imagine more things being added to this container component in the future (an image, an ajax of imformation coming and so on), so the simpler it is now, the simpler it will be to adjust in the future.
I have a div button that I was created through a PayPal integration and I have some text in a span that I would all like to align under my checkout button. The issue is that I can't seem to align the text over the button while keeping them within the same div. Image attached for loads of reference. What would be the best way to achieve this centering without splitting them up?
Dev view
Edit:
Here is the code as things currently stand:
<div class="buttons">
<div class="pull-left">{{'cart.general.continue_shopping' | t}}</div>
{%- if additional_checkout_buttons -%}
<div class="pull-right" id="additional-checkout-buttons" style="margin-left: 40px; margin-top: 8.4px;">
<span id="additional-checkout-buttons-label" style="margin-right: 5px; margin-top: 10.5px; display: inline-block;">{{'cart.general.checkout_using' | t}}:</span>
{{content_for_additional_checkout_buttons}}
</div>
{%- endif -%}
<div class="pull-right"><input type="submit" name="checkout" id="update-cart" class="btn btn-primary" value="{{'cart.general.checkout' | t}}" /></div>
</div>
After referencing your image, it looks like there is a 100% width on the .float-right div. I would change the width settings and make the container inherit the width of the children:
.float-right {
display: inline-block;
width: initial;
text-align: center;
}
Adding text-align: center to the .float-right div should center the span and button inside the div.
The reason why the .float-right div can't be 100% width is because you want to center both elements inside a width that is maximum as wide as the paypal button - so that the span aligns over the button nicely.
Here is the full snippet:
.float-right {
float: right !important;
width: 100%
}
<div class="float-right" id="additional-checkout-buttons" style="margin-left: 40px; margin-top: 8.4px; display: inline-block; width: initial; text-align: center;">
<span id="additional-checkout-buttons-label">Or checkout using:</span>
<div class="additional-checkout-button additional-checkout-button--paypal" style="margin-top: 25px;">
<button type="button">Paypal button</button>
</div>
</div>
As a side note, if width: initial doesn't want to play along, you could always add a fixed width to the .float-right div. But that would not be my first choice.
Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.
A summary of suggestions are:
display: inline-block
float: left
others refer to overflow: hidden, overflow: auto with various implementations.
One had worked, required me to set the right div:
position: absolute;
right: 0px
This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.
Above is that what I want to achieve.
The left div has the blue background. The right div contains the button.
My code:
Html
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src=""images/icons/edit.png">
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
Css
Note:using a basis of bootstrap for most of my css needs
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
Help would be very much appreciated
Without any changes to css, purely using bootstrap:
Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">
You can use the pull-left & pull-right classes to float the content:
<div class="row">
<div class="col-md-12"><!-- define columns in bootstrap -->
<div class="pull-left"><!-- use pull-left -->
<h1>
Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png">
</a>
</h1>
</div>
<div class="pull-right"><!-- use pull-right -->
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
</div>
Fiddle
This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png"/>
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
Try to use display: flex!
You can search in Google, you can learn display: flex easily.
First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:
.button_container {
display: flex;
justify-content: space-between;
align-items: center;
}
You don't need to write anything for the other 2 divs.
So if i have only one element, in my case a button, i just add the .center-block class to that element and it is centered.
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" class="btn btn-primary center-block">Element 1</button>
</div>
</div>
But what if i have two elements? I tried to wrap them in a div and added a .center-div class like so:
HTML:
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-div">
<button type="submit" class="btn btn-primary">Element 1</button>
<button type="submit" class="btn btn-primary">Element 2</button>
</div>
</div>
</div>
CSS:
.center-div {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.center-div is almost the same as .center-block except that i used display: inline-block; instead of display: block; so that it fits the contents size.
Sadly it doesn't work. Unless i change it to display: block; and assing it a fixed width like 200px.
What am i missing here?
Margin right and left set to auto only works if the width of the element is fixed.
As your center-div is now an inline-block, you need a text-align: center property on its container.
<div style="text-align: center">
<div class="center-div">
<!-- inner elements -->
</div>
</div>
I used a style attribute for convenience in this example
see if this helps:
.center-div {
width: 50%;
border: 1px solid black;
display: inline-block;
margin:0 auto;
text-align: center;
}
body{
text-align: center;
}
As you can see in my Jsfiddle, I have a div and three buttons. I would like the buttons to be placed at right: 85% (so that you get what I mean), without me having to use position: absolute.
I also tried this:
.button {
float: right;
}
.. but the buttons fall out off the div.
Any ideas please?
Here's my JsFiddle.
I've added a div to hold your three button divs. You can update the margin right to have it more to the left.
div.button-holder div:last-child{
margin-right: 10px;
}
Change Markup and add class:
<div class="header_div">
foo
<div class='btns'>
<button class="button">New</button>
</div>
<div class='btns'>
<button class="button">Load</button>
</div>
<div class='btns'>
<button class="button">Delete</button>
</div>
</div>
Instead Of..
.button {
float: right;
}
Try This...
.btns {
float: right;
}