我有一个 div,它由另外 3 个 div 组成,如下所示。
当调整窗口大小时,或者说如果正在移动设备中查看页面,则段落 p 标签消失,只有 anchor 标签 a 仍然存在,并且将显示图标。我能够隐藏段落标签,但无法将标签图标水平对齐并位于页面中心。请给我建议,让我知道是否应该包含更多信息。谢谢。
这是与 div 关联的 HTML 和 CSS
<div class="container" id="footer">
<div class="row">
<div class="col-md-4 footerSections paddingBottom20">
<div class="footerProfile">
<img src="images/avatar.jpg" id="avatar" height="100" width="100" style="float:left;" />
<p style="text-align: justify;">Deepak is a graduate in Computer Science. In my free time I like to learn new technologies and hangout with my friends.</p>
</div>
</div>
<div class="col-md-4 footerSections">
<div class="footerSocialLinks">
<div> <a href="#" target="_blank" style="float:left"><i class="fa fa-twitter fa-fw fa-2x"></i></a>
<p class="desktop-only">Follow <a href="#" target="_blank">@imadistack</a> for web development</p>
</div>
<div> <a href="#" target="_blank" style="float:left"><i class="fa fa-twitter fa-fw fa-2x"></i></a>
<p class="desktop-only">Follow <a href="#" target="_blank">@imadistack</a> for web development</p>
</div>
<div> <a href="#" target="_blank" style="float:left"><i class="fa fa-twitter fa-fw fa-2x"></i></a>
<p class="desktop-only">Follow <a href="#" target="_blank">@imadistack</a> for web development</p>
</div>
</div>
</div>
<div class="col-md-4 footerSections">
<div class="footerMenu">
<dl> <dt><a href="#aboutMe">ABOUT</a></dt>
<dd class="desktop-only">Learn about Deepak’s skills and workflow</dd> <dt><a href="#portfolio">PORTFOLIO</a></dt>
<dd class="desktop-only">View Deepak’s design & front-end development work</dd> <dt><a href="#skills">SKILLS</a></dt>
<dd class="desktop-only">Learn about Deepak's skills</dd> <dt><a href="#education">EDUCATION</a></dt>
<dd class="desktop-only">Learn about Deepak's education</dd> <dt><a href="#contact">CONTACT</a></dt>
<dd class="desktop-only">Send a message or project request to Deepak</dd>
</dl>
</div>
</div>
</div>
</div>
.footerSections{
padding:0 30px 0 30px;
}
.footerSocialLinks ul{
list-style:none; margin:0; padding:0;
}
@media (min-width: 640px)
{
.desktop-only{
display:block;
}
}
@media (max-width: 640px)
{
.desktop-only{
display:none;
}
#footer{
padding: 40px 35px 40px 35px;
}
.footerSections{
padding:10px;
}
.footerMenu dt {
text-align:center;
padding: 5px 0 5px 0;
}
.footerSocailLinks {
display: inline-block;
text-align: center;
}
}
更新:我确实使用了媒体查询,这就是我能够隐藏 p 标签的方式。
这是 fiddle 的链接
http://jsfiddle.net/JfGVE/598/
您会看到 Twitter 图标位于页面左侧。当窗口尺寸缩小或在移动 View 中时,它们应该居中。
最佳答案
这里有 3 个问题。
- anchor 标记的
float:left
。它使您的元素忽略父容器中的所有text-align
。 .footerSocialLinks
的display: inline-block
,您应该将其保留为标准display: block
或添加一个width
(例如width: 100%
)到元素。- 您需要在
.footerSocialLinks
上设置whitespace: no-wrap
并在其内部的分区上设置display:inline-block
以防止他们跳入新行。
此外,您当前的样式表“.footerSocailLinks”中存在拼写错误。
试试下面的样式表:
.footerSocialLinks{
text-align:center;
whitespace:no-wrap;
}
.footerSocialLinks > div{
display:inline-block;
text-align: center;
}
我在你的 fiddle 中试过这个,它做了它应该做的。只需将上面的样式表放在媒体查询中即可。
并且不要忘记从您的 anchor 标记中删除 float
!
关于javascript - 使用 css responsive 将 div 中的元素居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32663318/