Currently, I'm working on a div.
<div className="cert-footer">
<Button
type="submit"
primary={true}
fullWidth={false}
>
Confirm
</Button>
</div>
The CSS I have for it includes:
.cert-footer {
padding-bottom: 20px;
align-items: center;
}
Despite setting the padding to be 20px from the bottom and trying to center the button with align-items, it still appears towards the left side. What could be causing this misalignment?
One thing to consider is adding display: flex; or display: grid; to your .cert-footer, with a preference towards the former in this scenario. It's important to note that align-items will not function properly unless the element is set as flex or grid.
Additionally, are you aiming for vertical or horizontal alignment? Keep in mind that align-items works vertically, while justify-content and justify-items function horizontally by default.
Don't forget to include this CSS in your code
.cert-footer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} <div class="cert-footer">
<Button
type="submit"
primary={true}
fullWidth={false}>
Confirm
</Button>
</div>I'm just starting out and I want to make a size chart table that can convert between metric units. For example, I have table data with values in "inches" and I want to be able to switch it to "centimeters" with the click of a button. Some of the data ...
Using the FullCalendar plugin has been a great experience for me. I have managed to successfully read data from a JSON object with the following code: function press1() { var employees = { events: [] }; ...
Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...
Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it! I'm currently struggling with setting precise margins for text. In the example below, there&apos ...
How can I make the button with position: fixed property only visible inside the second div and not remain fixed when scrolling to the first or last div? .one{ height:600px; width: 100%; background-color: re ...
I am trying to adjust the positioning of text on top of an image with a 40px margin. Additionally, I want to place two buttons on each side of the list item (one on the right and one on the left). Despite numerous attempts with various solutions, including ...
I am working with fabric.js and canvas to dynamically add an image from a URL. I would like to make the canvas responsive based on the resolution. How can this be achieved? Here is my current code: <canvas id="panel" width="700" height="350"></ ...
I am facing a strange issue with my index.html page, which is a website built using jQuery Mobile. The problem arises when I click on a button multiple times within a form on this page - it generates an alert to confirm that the button is working and then ...
Struggling as a beginner in javascript, I find myself stuck on writing an If statement that triggers after the fourth turn. My goal is to have an alert pop up once the user has clicked on four options. The counter variable "turns" was added to track prog ...
Is It Possible to Integrate Observable with FullCalendar? I have a collection in Cloud Firestore and I want to display the data from this collection in real-time on FullCalendar. Although I know that using an Observable is necessary for this task, it see ...
I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary. The submenu is ap ...
Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it. It's like a social media platform where users enter the site and the is_user_logged_in parameter ...
Looking to incorporate the data from a Json array retrieved from an API into my HTML. What steps should I take to achieve this? Below is the Json array in question: { page: 2, per_page: 3, total: 12, total_pages: 4, data: [ { id: 4, ...
While exploring Bootstrap 5.0, I noticed that the card-columns class was missing and there is no mention of it or its alternative in the Bootstrap 5.0 documentation. However, it can still be found in the Bootstrap 4.6 documentation. I understand that usin ...
I have been experimenting with this library to determine if a form is dirty. By default, it triggers the standard browser confirmation asking whether you are certain about navigating away from the page. The jquery dirtyforms website includes a section sugg ...
I am currently working on a page that displays multiple images, with each image's path stored in the database. Using PHP, I retrieve and display these images based on their paths. My goal is to enable users to click on an image and have it open in a ...
I am currently using Bootstrap collapse as a reference from http://getbootstrap.com/javascript/#collapse. Given that I am using Angular router, how should I define the href attribute for the collapse element on the localhost/#/flow page? <a class="acc ...
I am facing a common issue with two side-by-side divs, which I usually solve without any problems by floating both divs left and adding a clear:both div after them. However, my requirements have made this problem more complicated to solve... What I would ...
If I have a nested dictionary within the context dictionary in a Django template, I know how to iterate over it using a method mentioned in this Stack Overflow thread. However, I am looking for a way to find a specific value by key. For example: {{ nested ...
I'm curious about the excessive padding above and below the text in this fiddler box. http://jsfiddle.net/fZ6d7/1/ CODE <style> .simplebox { padding: 6px; background: #eee; border-radius: 8px; border: 1px ...