Centering text in label and making entire label clickable-CodePudding

im trying to style a file input button but I'm running into this annoying issue using labels.

This is the button in question, my first question is how could I make the text centered in the label. My second question is that when my cursor is in the upper half of the button it is clickable but the other half is not how could I make the entire button clickable?

its also important that the button isn't weirdly positioned and retains the same position as in this picture

Im 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  style="border-radius: 25px 25px 0px 0px;">
    <input id="texture-upload"  type="file">
    <input id="texture-upload"  type="file">
    <label for="texture-upload" >
        <p >Select texture folder</p>
    </label>
    <a >Made with ❤️ by Maloni</a>
 </div>

Codepen:

CodePudding user response：

consider using flex instead of grid. easier to center,

so for your custom css .container class - display: flex then on the parent, use both justify-content: center, alignItems:center. move your cursor: pointer to the parent div i.e .container, only the label has it that's why it's the only clickable part. if you want more clarity. make a codepen and add it to your initial question and I can edit it myself

CodePudding user response：

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div  style="border-radius: 25px 25px 0px 0px;">
    <input id="texture-upload"  type="file">
    <label for="texture-upload" >
        <p >Select texture folder</p>
    </label>
    <a >Made with ❤️ by Maloni</a>
 </div>

CodePudding user response：

I think it'll work

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

}

CodePudding user response：

The "bounding-box" of your element is equal to the elements size padding borders. It depends on how you set the box-sizing attribute - it will determine whether the padding should be taken into account. Margins don't count for the size.

For the layout: Use flexbox. It is super flex-ible (pun intended) for aligning stuff.

You can set justify-content-center to make the elements inside the flexbox-container horizontally centered and align-items-center to make the vertically centered.

I've simplified your code a little bit and added the centering:

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<body >
  <footer >
    <div >
      <input id="texture-upload"  type="file">
      <input id="texture-upload"  type="file">
      <label for="texture-upload" >Select texture folder</label>
      <a >Made with ❤️ by Maloni</a>
    </div>
  </footer>
</body>

</html>