Javascript 定心文件输入引导_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 定心文件输入引导

javascript jquery html css twitter-bootstrap

Javascript 定心文件输入引导,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,嘿，我正在使用html、css、bootstrap和javascript构建一个网站。由于某些原因，我的输入不会完全集中。我不知道为什么！！！我认为这可能与引导有关 <DOCTYPE html!> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

嘿，我正在使用html、css、bootstrap和javascript构建一个网站。由于某些原因，我的输入不会完全集中。我不知道为什么！！！我认为这可能与引导有关

 <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>


身体{
字体系列：futura；
}
#磷化铟{
保证金：自动；
}
琼伯伦先生{
保证金：自动；
文本对齐：居中；
}
img{
宽度：150px；
高度：150像素；
边界半径：50%；
}





欢迎访问您的个人资料

您当前的个人资料图片：

将

输入[type=“file”]

元素的

宽度设置为83.5px
，左设置为calc（）
，参数为50vw-41.75px
，：-webkit文件上传按钮填充和边距，chromium和firefox


身体{
字体系列：futura；
}
#磷化铟{
宽度：83.5px；
位置：相对位置；
填充：0；
保证金：0；
左：计算（50vw-41.75px）；
}
：-webkit文件上载按钮{
填充：0；
保证金：0；
显示：块；
}
琼伯伦先生{
保证金：自动；
文本对齐：居中；
}
img{
宽度：150px；
高度：150像素；
边界半径：50%；
}








欢迎访问您的个人资料！


您当前的个人资料图片：










你能指望一个文件输入总是238px宽吗？另外，从我所能看出，这与OP得到的结果是一样的，@hungerstar的238px
width
。元素的宽度
可以显式设置为css
，然后在左侧
规则中使用。是的，结果看起来是一样的。替代方法是用按钮
或输入类型=“button”
元素替换输入类型=“file”
元素，而不是尝试调整呈现选择文件
的ShadowDOM
元素的css
。input type=“file”
元素的ShadowDOM
的css
部分可能是可访问的，这与.shadowRoot
本身不同，请参见。从我可以看出，输入在chrome中居中，但它看起来不像，因为文本“未选择文件”后有一堆空白。如果您使用开发人员工具检查元素，它将以蓝色高亮显示，您可以从该高亮显示中看到它以文本和上方的圆形图像居中。见鬼，右键单击文本将在元素周围创建一个焦点环，以查看我所说的内容。由于文件类型输入很难设置样式。