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

Question

我正在使用 Bootstrap 框架进行设计 我遇到了一些屏幕尺寸的问题，因为这个网站是响应式的 我可以通过针对每个媒体来解决这个问题，但我认为通过使用带有 Bootstrap 的定义类可以解决这个问题 这个问题我只想在所有媒体屏幕的中心放置一些元素，为了解释它我更喜欢使用图像
在大屏幕上没问题

但在其他媒体

这是代码提示

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

和 margin :0 自动；

Answer 1

谢谢大家的评论 我按照@amitrh 的指示制作，这对第一个元素 block 工作正常，并且在所有屏幕上都这样工作

并且链接出现在我想要的中心，并通过应用此代码出现在 block 中

.socialicons {
    display: table;
    margin: auto;

对于最后一个中的第二个 block ，它有另一个行为，因为字体图标比第一个中的图标大，就像这样 这也是 所以我将CSS更改为

display: inline-table;
margin: auto;

并且像这样在所有屏幕中工作正常并在左侧居中

感谢您的评论和代码提示，因为您节省了我的时间，这帮助我解决了我的问题，而无需 css hack 或其他不必要的代码 @box86rowh @amitrh @BootstrapBoogie - 克里斯蒂娜