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.
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.
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
I have this situation: I want to make a IMG height to be fit with its parent DIV where no height is set. This is the sample code:
.box_NewsList {
width: 100%;
background: #ffa;
overflow: hidden;
display: inline-block;
}
.box_NewsList>img {
height: 100%;
display: inline-block;
}
.box_NewsPreview {
padding: 15px;
width: auto;
}
.box_NewsPreview>.tit_News {
font-size: 1.5rem;
line-height: 1.5rem;
position: relative;
margin: -15px 0 15px;
padding: 15px 0 0;
background: transparent url(../imgs/main_menu_hover.png) no-repeat top left;
}
<div class="box_NewsList">
<img class="pull-left" src="mypicture.jpg">
<div class="box_NewsPreview">
<h1 class="tit_News">MyTitle</h1>
<div class="txt_Abstract">
<p>Long text abstract here</p>
</div>
<button class="btn btn-default btn-rounded pull-right">READ</button>
</div>
<div class="clear"></div>
</div>
How can I make the img height to fit the height of div with box_NewsPreview class?
.box_NewsPreview>.txt_Abstract p{color:#7e7e7e;font-family:Roboto, sans-serif;font-size:1rem;font-weight:300;text-align:justify;}
If I add a height value in box_NewsList like height:300px; it works fine.
If I set height:auto, height:initial, height:inherit or I don't add any height value in that class then I get the IMG in its full size instead of resizing in its parent height.
I think the easiest way to acheive what you want is to use a little jQuery. I dont think it is possible with pure CSS
I have made an example where i set position: relative; on .box_NewsList and position: absolute; on .box_NewsList>img
and the this little script to loop through the images and give padding to the text:
$('.box_NewsList').each(function() {
var imageWidth = $(this).find('img').width();
$(this).find('.box_NewsPreview').css('padding-left', imageWidth + 15);
});
Here is a fiddle
try
<div class="box_NewsList">
<div class="box_NewsPreview">
<img class="pull-left" src="mypicture.jpg" stretch="fill">
<h1 class="tit_News">MyTitle</h1>
<div class="txt_Abstract"><p>Long text abstract here</p></div>
<button class="btn btn-default btn-rounded pull-right">READ</button>
</div>
<div class="clear"></div>
</div>
It looks like <img> was inside news_list not news_preview.
I added stretch to the img, so no matter what it will always stretch to the size of the div :)
Can you please help me to place the buttons in the bottom center of the horizontal Layout see picture below.
Ps: the top vertical layout has a dynamic height.
Here's my HTML code:
<html>
<body>
<div class="container" style="height: 100%">
<div class="v-panel-content v-panel-content-task-search-list-view v-scrollable" tabindex="-1"
style="position: relative; height: 100%; width: 275px; border-radius: 10px; border-style: none;">
//-----------------------Vertical Layout
<div location="loc1"></div>
<div location="loc2" style="margin-left: 8px;"></div>
<div location="loc3"></div>
<div location="loc4"></div>
//-----------------------HorizontalLayout
<div location="buttonLayout"></div>
</div>
</div>
</body>
</html>
The dynamicity of the above <div> won't make a difference if it's positioned to flow with the document (not absolute, or fixed).
Your bottom <div> should have the CSS properties text-align: center; applied to it. As you're probably aware, this centralises inline elements within the <div>
As your buttons may not be inline elements, we need to set them to display: inline-block;. This will position them as text would be positioned within their parent element.
Make sure that they don't have a float property applied to them, or else they will align according to this declaration.
See the below fiddle
.lower {
text-align: center;
}
.button-lower {
display: inline-block;
padding: 5px;
background: green;
}
<div class="lower">
<a class="button-lower" href="#">Vider</a>
<a class="button-lower" href="#">Chercher</a>
</div>
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;
}