CSS网页宽度,导航栏居中和小部件包装居​​中

时间:2016-07-28 18:05:28

标签: html css alignment center

我对CSS很新。正如您所看到的,我的网页目前在我的内容的左侧和右侧有很大的空间,使我的导航栏很长。我希望将此设置为不太宽,而不会影响我的主题在移动设备或平板电脑上的响应能力。

我还想将社交媒体图标/小部件置于我徽标下方的顶部,并将链接置于导航栏中心。

网站:

http://aspectcopywriting.co.uk/

有人可以帮忙吗?

由于

2 个答案:

答案 0 :(得分:2)

虽然Emily的答案中的CSS确实有效,但它并不是以div为中心的正确方法。根据{{​​3}},您应该在包含您希望居中的社交图标和导航标签的元素上使用宽度和边距,如下所示:

.social_container{
  width: 225px;
  margin: 0 auto;
}

.nav_links_container{
  width: 605px;
  margin: 0 auto;
}

这会将这些项目置于其父元素中。

答案 1 :(得分:0)

嗯,这很容易。您只需选择包含社交媒体图标的div,然后使用值为text-align的{​​{1}}属性。像这样:

center

现在一切都应该集中! 如需更多参考,请查看MDN