Question

我正在使用bootstrap框架进行设计我面临一些屏幕尺寸的问题，因为这个网站是响应我可以通过目标每个媒体来解决这个问题，但我认为通过使用带引导程序的定义类有一个解决方案问题我只是想在所有媒体屏幕的中心放置一些元素，解释它我更喜欢使用图像
在大屏幕上没有问题 enter image description here

但在其他媒体上 enter image description here

这是代码提示

 <div class="socialicons center-block">
                 <a href="#"><i id="social-user" class="fa fa-facebook-square fa-2x social-fb"></i></a>
                <a href="#"><i id="social-user" class="fa fa-twitter-square fa-2x social-tw"></i></a>
                <a href="#"><i id="social-user" class="fa fa-google-plus-square fa-2x social-gp"></i></a>
                <a href="#"> <i id="social-user" class="fa fa-linkedin-square fa-2x social-tw"></i></a>
            </div>

我试过这个css

display: block;
margin-right: auto;
margin-left: auto;

和保证金：0自动;

Answer 1

感谢您的评论我做了@amitrh指示，这与第一个项目块工作正常，并在所有屏幕中像这样工作 enter image description here

并且链接显示在我想要的中心，并在块中应用此代码

.socialicons {
    display: table;
    margin: auto;

对于最后的第二个块它有另一个行为，因为字体图标比第一个中的图标大像这样 enter image description here 这也是所以我把css改为

display: inline-table;
margin: auto;

在这样的所有画面中工作得很好并且在左边居中 enter image description here

感谢您的评论和代码提示，因为您节省了我的时间，这有助于我解决我的问题，而无需css hacks或其他不必要的代码 @ box86rowh @amitrh @BootstrapBoogie - Christina

特定div中所有媒体屏幕中的中心元素

1 个答案: