Html 如何使社交媒体图像成为模态对话框的中心？

下面是我的登录对话框代码

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
    aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title" id="loginModalLabel">Log In or Sign Up</h2>
            </div>
            <div class="modal-body text-center">
                <div class="row">
                    <form class="form-inline">

                        <div class="form-group col-md-3">
                            <img alt="Facebook" class="img-soc"
                                src="./images/facebookPage.png">
                        </div>
                        <div class="form-group col-md-3">
                            <img alt="Google+ " class="img-soc"
                                src="./images/googlePlusPage.png">
                        </div>
                        <div class="form-group col-md-3">
                            <img alt="Twitter" class="img-soc"
                                src="./images/twitterPage.png">
                        </div>
                    </form>
                </div>

                <div class="row">
                    <form class="col-md-12">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1"><span
                                    class="glyphicon glyphicon-user"></span></span> <input type="text"
                                    class="form-control" placeholder="Username"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon1"><span
                                    class="glyphicon glyphicon-lock"></span></span> <input type="text"
                                    class="form-control" placeholder="Username"
                                    aria-describedby="basic-addon1">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Login</button>
                <button type="button" class="btn btn-secondary">Sign Up</button>
            </div>
        </div>
    </div>
</div>

&时代；
登录或注册
登录
注册

登录对话框截图

如何使社交媒体图像成为对话的中心？ 如何改变模型的大小

我不想提供自定义边距，而是想使用引导类来实现。 请帮忙

---

提前谢谢

如果尚未完成，则应将图像居中

.img-soc {
margin-right: auto;
margin-left: auto;
}

我想这会解决你的问题。否则，您应该在引导中进行偏移

.form-inline {
   display: flex;
   justify-contents: center;
   align-items: center;
}

这应该以你的社交媒体形象为中心

form.col-md-12 {
   padding: 10px;
}

---

这应该会给表单输入留出从容器边框开始的喘息空间。`

您能提供您正在使用的css吗？使用font Asome会很好，并且更容易处理大小。