居中文件输入 Bootstrap

Question

嘿，我正在使用 html、css、bootstrap 和 javascript 构建网站。由于某种原因，我的输入不会完全居中。 我不知道为什么！！！ 我认为这可能与 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>

Answer 1

使用参数50vw - 41.75px、::-webkit-file-upload-button将input[type="file"]元素的width设置为83.5px、left为calc() padding 和 margin 到 0 returns 在 chrome、chromium 和 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>

居中文件输入 Bootstrap

Centering File Input Bootstrap

javascript

jquery

html

css

twitter-bootstrap