Centering File Input Bootstrap

Question

Hey I am building a website using html, css, bootstrap, and javascript. And for some reason my input won't completely center. I HAVE NO CLUE WHY!!! I think it might have to do with bootstrap.

 <DOCTYPE html!>
    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <style type="text/css">
            body {
              font-family: futura;
            }

            #inp {
              margin:auto;
            }

            .jumbotron {
              margin: auto;
              text-align: center;
            }

            img {
              width: 150px;
              height: 150px;
              border-radius: 50%;
            }

        </style>
    </head>
    <body>
<ul class="nav nav-tabs">
  <li role="presentation"><a href="file:///Users/Programmer/Desktop/Hangawt.html">Home</a></li>
  <li role="presentation" class="active"><a href="#">Profile</a></li>
  <li role="presentation"><a href="file:///Users/Programmer/Desktop/Hangawt_request.html">Hangawts <span class="badge">0</span></a></li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1><br>
<h3>Your Current Profile Picture:</h3><br><br>
<img src="http://placehold.it/350x150"><br><br><br>
<input id="inp" type="file" accept="image/*">
</div>
    </body>
    </html>

From what I can tell the input is being centered in chrome, it doesn't look like it though because there's a bunch of white space after the text _"No file chosen"_. If you inspect the element with Developer Tools it will be highlighted blue and you can see from that highlight it's centered with the text and circular image above it. Heck, right clicking the text will create a focus ring around the element to see what I'm talking about. Since file type inputs are very hard to style. — hungerstar, Oct 27 '16 at 22:18

guest271314 · Accepted Answer · 2016-10-28T02:18:45.167

Setting the width of input[type="file"] element to 83.5px, left to calc() with parameter 50vw - 41.75px, ::-webkit-file-upload-button padding and margin to 0 returns expected results at chrome, chromium and firefox.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style type="text/css">
    body {
      font-family: futura;
    }
    #inp {
      width: 83.5px;
      position: relative;
      padding: 0;
      margin: 0;
      left: calc(50vw - 41.75px);
    }
    ::-webkit-file-upload-button {
      padding: 0;
      margin: 0;
      display: block;
    }

    .jumbotron {
      margin: auto;
      text-align: center;
    }
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <ul class="nav nav-tabs">
    <li role="presentation"><a href="file:///Users/Programmer/Desktop/Hangawt.html">Home</a>
    </li>
    <li role="presentation" class="active"><a href="#">Profile</a>
    </li>
    <li role="presentation"><a href="file:///Users/Programmer/Desktop/Hangawt_request.html">Hangawts <span class="badge">0</span></a>
    </li>
  </ul>
  <div class="jumbotron">
    <h1>Welcome To Your Profile!</h1>
    <br>
    <h3>Your Current Profile Picture:</h3>
    <br>
    <br>
    <img src="http://placehold.it/350x150">
    <br>
    <br>
    <br>
    <input id="inp" type="file" accept="image/*">

  </div>
</body>

</html>

Can you count on a file input to always be 238px wide? Also from what I can tell this is the same result as the OP is getting, [JSFiddle](https://jsfiddle.net/a21exv30/). — hungerstar, Oct 27 '16 at 22:16
@hungerstar The `238px` `width` cannot be counted on. The `width` of the element can be explicitly set at `css`, then used at the `left` rule. Yes, the result appears the same. The alternative would be substituting a `button` or `input type="button"` element for `input type="file"` element, short of attempting to adjust the `css` of `ShadowDOM` element which renders `Choose file`. The `css` portion of `ShadowDOM` of `input type="file"` element may be accessible, unlike the `.shadowRoot` itself , see http://stackoverflow.com/questions/40293439/how-can-i-get-a-file-upload-buttons-text/ . — guest271314, Oct 27 '16 at 22:30

Centering File Input Bootstrap

1 Answers1