代码之家 › 专栏 › 技术社区 › X3N4

在Materialize CSS中,如何在卡片面板中居中放置字体很棒的图标?

responsive materialize css-selectors css html

X3N4 · 技术社区 · 6 年前

关于我的内容和Materialize CSS库中使用的卡片的对齐,我一直有一个问题。我一直在试图找到一种方法,使我的字体图标在指定的卡片面板中居中 相对的 长宽比。我的标签和类有什么问题吗?

HTML:

<body>
<div class="row">
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-linkedin fa-4x"></i></a></center>
        </div>
    </div>
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-github fa-4x"></i></a></center>
        </div>
    </div>
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-twitter fa-4x"></i></a></center>
        </div>
    </div>
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-codepen fa-4x"></i></a></center>
        </div>
    </div>
</div>
</body>

CSS:

body {
  background-image:url(https://s-media-cache-ak0.pinimg.com/originals/c7/5d/e1/c75de1208bf12c355ad1ba4264787b18.jpg);
  background-size:cover;
  color:white;
  position:relative;
}

.card-panel {
 display: flex;
 text-align: center;
}

.icon {
  text-align: center;
}

.fa {
  position: relative;
}
.fa:hover {
  color:white
}

现在在桌面上,“我的卡”面板上的图标在每张卡上保持向左偏移: https://i.stack.imgur.com/dWhix.png

在手机上也可以看到同样的情况,但这次图标不仅偏移,而且对每个卡面板的宽度也没有响应: https://i.stack.imgur.com/K0PS6.png

所以,为了完成这个格式化任务,我如何才能将每个图标与每个给定的卡片面板对齐和使其响应不同的屏幕大小?最后,这可以使用已经是HTML和CSS的一部分的属性来实现吗,或者我必须为此实现Flexbox或CSS网格之类的框架吗?

1 回复 | 直到 6 年前

chartman 6 年前

当我移除时 display: flex; 从卡面板

.card-panel {
 text-align: center;
}

这对我有用

推荐文章

user5900363 · 具有引导功能的2列响应式布局4

6 年前

user9459537 · 响应式Web设计不适用于根据页面宽度仅显示一个div的情况

6 年前

Filip Vuskovic · Bootstrap 3.3.7 md上的列布局问题