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

将width元素的input[type="file"]设置为83.5px，left设置为calc()，参数为50vw - 41.75px，::-webkit-file-upload-button {{ 1}}和padding到margin会返回chrome，chromium和firefox的预期结果。

居中文件输入引导程序

1 个答案: