将文件输入表单居中 - html/bootstrap/angular [英] centering a file input form - html/bootstrap/angular

问题描述

我使用 Angular 指令创建了一个文件输入，但由于某种原因似乎很难将其居中:

I have created a file input with an Angular directive and it seems really hard to center it for some reason:

这是我的 HTML，感谢您的任何见解.

This is my HTML, thanks for any insight.

<form class=".form-control">
    <center style="border: blue">
        <input class=".form-control" type="file" file-input="files" multiple>
    </center>
    <br>
    <br>
    <button class=".form-group" ng-click="upload('/upload')">Upload</button>
    <button class=".form-group" ng-click="upload('/upload/save')">
        Save New Profile Picture
    </button>
    <li ng-repeat="file in files">{{file.name}}
        <img ng-src="{{imageData}}" style="max-height: 200px; max-width: 200px">
    </li>
</form>

推荐答案

对于初学者来说，你现在不应该使用 center，它已经过时了.现在，您可以这样做:

For starters, you shouldn't use center now, it's obsolete. Now, you can do this:

<input class="form-control center" type="file" file-input="files" multiple>

CSS

.center { 
    margin: 0 auto !important; /* I have added the !important attribute just for debugging, you can remove it. */ 
}

另一个有效的技巧是使用 flexbox:

Another trick which works is to use flexbox:

<form class="form-control flex">

CSS:

.flex { 
    display: flex;
    justify-content: center;
    align-items: center; /* Optional */
}

在此处阅读有关 flexbox 的更多信息.

Read more about flexbox here.

这篇关于将文件输入表单居中 - html/bootstrap/angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！