Ensuring text is perfectly centered within a label and creating a label that is entirely clickable

Struggling to style a file input button and encountering some issues with labels.

Here is the button in question. Firstly, how can I center the text in the label? Secondly, how can I make the entire button clickable instead of just the upper half?

Also, it's crucial that the button maintains its position as shown in this image.

Using Bootstrap along with a custom CSS file.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.custom-file-upload {
    background-color: rgb(99, 99, 99);
    border-radius: 15px;
    border: 1px solid #ccc;
    margin: 6px 180px;
    cursor: pointer;
}

<div class="fixed-bottom bg-secondary container" style="border-radius: 25px 25px 0px 0px;">
    <input id="texture-upload" class="pt-2" type="file">
    <input id="texture-upload" class="pt-2" type="file">
    <label for="texture-upload" class="custom-file-upload">
        <p class="text-white text-center pt-2">Select texture folder</p>
    </label>
    <a class="fixed-bottom text-secondary text-center pb-2">Made with ❤️ by Maloni</a>
 </div>

Codepen: https://codepen.io/mal0n1/pen/podjOmp

htmlcssbootstrap-5

Answer №1

The term "bounding-box" refers to the total space occupied by an element, including its size, padding, and borders. The calculation of the bounding box may vary based on the setting of the box-sizing attribute, which determines whether padding should be included. Margins do not contribute to the overall size of the element.

For layout purposes, utilizing flexbox is highly recommended. It offers great flexibility for aligning content in a responsive manner.

To horizontally center elements within a flexbox container, use justify-content-center, and for vertical centering, utilize align-items-center.

I have streamlined your code and added centering for better alignment:

input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.footer {
  border-radius: 25px 25px 0px 0px;
}

.upload {
  gap: 10px;
}

.custom-file-upload {
  background-color: rgb(99, 99, 99);
  border-radius: 15px;
  border: 1px solid #ccc;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<meta charset="utf-8" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2b3928186d7669766b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<body class="bg-dark">
  <footer class="fixed-bottom bg-secondary container p-2 footer">
    <div class="d-flex align-items-center justify-content-center upload">
      <input id="texture-upload" class="pt-2 flex1" type="file">
      <input id="texture-upload" class="pt-2 flex2" type="file">
      <label for="texture-upload" class="p-2 text-white custom-file-upload">Select texture folder</label>
      <a class="text-white">Made with ❤️ by Maloni</a>
    </div>
  </footer>
</body>

</html>

Answer №2

To center your text, you can use absolute positioning along with the top and left properties

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

input[type="file"] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.custom-file-upload {
  background-color: rgb(99, 99, 99);
  border-radius: 15px;
  border: 1px solid #ccc;
  height: 50px;
  width: 480px;
  cursor: pointer;
  position: absolute;
}

.custom-file-upload p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

If we define width and height for .custom-file-upload while using absolute positioning, it should also address any cursor issues. I tested it on my device and it worked perfectly.

Does this achieve the desired output for you?

https://i.sstatic.net/peauj.png

Answer №3

Try switching to flex instead of grid for a simpler centering solution.

For your custom CSS, apply display: flex to the .container class and then on the parent, include justify-content: center and align-items: center. Move cursor: pointer to the parent div (i.e. .container) to ensure the entire area is clickable. If you need further clarification, create a codepen and share it with me so I can assist with the adjustments.

Answer №4

.container {
    display: flex;
    justify-content:space-between;
    align-items:center;
    padding:5px;
}

input[type="file"] {
  display:none;
}
.custom-file-upload {
    background-color: rgb(99, 99, 99);
    border-radius: 15px;
    border: 1px solid #ccc;
    padding: 5px 30px;
    cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269776975">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="fixed-bottom container bg-secondary d-flex" style="border-radius: 25px 25px 0px 0px;">
    <input id="texture-upload" class="pt-2" type="file">
    <label for="texture-upload" class="custom-file-upload">
        <p class="text-white text-center pt-2">Choose texture directory</p>
    </label>
    <a class="text-secondary">Crafted with ❤️ by Maloni</a>
 </div>

Answer №5

I believe this solution will be effective

.custom-file-upload p{
background-color: rgb(99, 99, 99);
border-radius: 15px;
border: 1px solid #ccc;
padding: 5px 30px 12px 30px;
cursor: pointer;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery Enhancement for Navigation

Recently, I have implemented a header and footer navigation on my website. The header navigation consists of 1 UL (unordered list), while the footer navigation comprises 5 ULs. My goal is to align the first child of each UL in the footer navigation with th ...

javascriptjqueryhtmlcsssharepoint-2007

Validating the Color Coding of Backgrounds in a Table using Selenium WebDriver and Java

Can Xpath or another method be used to validate the Color Coded Background inside a Table for a specific Value? The background color in question is rgb(96,192,96). There are 5 different links on the page, each with the same background color. It is necessar ...

javahtmlseleniumxpathcolors

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...

htmlcss

What could be causing my PHP code to not execute properly alongside the HTML?

I am currently sharpening my skills in PHP by working on a simple web form project. To put it simply, I need to develop a basic web form that accepts a two-dimensional array of European cities along with the distance in kilometers between each pair of citi ...

phphtml

Looking to include a delete button for removing the currently selected tab in a Bootstrap tabs component

Currently, I am in the process of developing a travel website and have encountered an issue with implementing Bootstrap tabs in the admin section. I have managed to tackle some aspects, such as dynamically creating tab options. The problem arises when t ...

jqueryhtmltwitter-bootstrapbootstrap-4

Using the feColorMatrix SVG filter in CSS versus applying it in JavaScript yields varied outcomes

If we want to apply an SVG filter on a canvas element, there are different ways to achieve this. According to this resource, we can apply a SVG filter to the CanvasRenderingContext2D in javascript using the following code snippet: ctx.filter = "url(#b ...

javascripthtmlcsshtml5-canvassvg-filters

What is the best way to eliminate HTML <li> bullets using codebehind?

When working in codebehind, I often create an HTML list using the following method: HtmlGenericControl list = new HtmlGenericControl("ul"); for (int i = 0; i < 10; i++) { HtmlGenericControl listItem = new HtmlGenericControl("li"); Label textLabel ...

javascriptcsshtml-listscode-behind

Content that is dynamically generated by a database

I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...

javascriptphpjqueryhtmlfacebook

Incorporating JavaScript unit tests into an established website

I am facing a challenge with testing my JavaScript functions in the context of a specific webpage. These functions are tightly integrated with the UI elements on the page, so I need to be able to unit-test the entire webpage and not just the functions them ...

javascripthtmlunit-testing

Creating a sleek full-page container with a navigation bar using TailwindCSS

I am currently utilizing Tailwind CSS and in need of creating a layout that consists of: A sticky navigation bar A full-page section with content centered Other sections with varying heights A footer Below is a simple representation: +------------------- ...

htmlcssfrontendtailwind-css

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

htmlmysqlnode.jsexpress

Ways to make a div adjust to the width of its content

Hello, this is my first time posting a question here. I have found many helpful Java answers in this community before, so I thought I'd give it a try. I did some research beforehand, but please let me know if I have duplicated a question or done anyth ...

css

Unable to access a hyperlink, the URL simply disregards any parameters

When I click an a tag in React, it doesn't take me to the specified href. Instead, it removes all parameters in the URL after the "?". For example, if I'm on http://localhost:6006/iframe.html?selectedKind=Survey&selectedStory=...etc, clicking ...

javascripthtmlreactjsanchorhref

Issue with Scrollspy Functionality in Bootstrap 4

Scrollspy feature isn't working in my code. <nav class="navbar navbar-expand-lg fixed-top navbar-dark" role="navigation"> <div class="container"> <a class="navbar-brand" href="#featured"><h1></h1></a> < ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Issue occurred while trying to update the MySQL database with an HTML form and Ajax integration

I am facing an issue with my form that uses a drop-down box and a hidden form field to send information to a PHP page. Everything works as expected when I submit the form directly to the PHP page, but when I try using AJAX to pass the information, it doesn ...

htmlajax

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

javascriptjqueryhtmlcssforms

My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance: However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window ...

htmlcssweb

Find the value of the nearest input field using jQuery

I'm working with HTML code that looks like this: <tr> <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td> < ...

javascriptjqueryhtml

`Modify the title property of raphael elements`

I am currently using raphael.js for drawing and I would like to customize the title attribute (such as changing color, font size, etc). circle.attr({ title: 'This is a circle.', fill: 'red' }); You can view my example on jsfi ...

htmltooltipraphaelcustomizationtitle

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

javascriptcssnode.js