jquery - 将 div 组居中作为响应式网站标题

标签 jquery html css

我正在考虑将 jQuery 随机淡入用于网站标题。更改视口(viewport)大小时,div 会按照我的需要堆叠(全尺寸连续排列,随着屏幕变小,堆叠最多为 3x3)。但是,我不知道如何让这组div在页面上居中>

#header {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}
#boxset div {
  width: 100px;
  height: 100px;
  float: left;
  overflow: hidden;
  margin-right: 8px;
  margin-bottom: 8px;
}
#boxset div p {
  margin: 0;
  background: #290052;
  color: #fff;
  font-size: 40px;
  width: 100%;
  height: 100%;
  /*display: none;*/
  padding-top: 26px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
<div id="header">
  <div id="boxset">
    <div>
      <p><a href="index.html">A</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">B</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">C</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">D</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">E</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">F</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">G</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">H</a>
      </p>
    </div>
    <div>
      <p><a href="index.html">I</a>
      </p>
    </div>
  </div>
</div>

最佳答案

你可以使用 display: inline-block;而不是 float ,然后文本对齐:居中;在 parent 身上:

#header {
    text-align: center;
}
#header div {
    display: inline-block;
}

关于jquery - 将 div 组居中作为响应式网站标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32910886/

相关文章:

jQuery - 可缩放的可拖动 div

jquery - "Unable to get value of the property ' IE 中拆分 ': object is null or undefined"错误

jquery - 验证所有表单输入是否具有类别

jquery - 使用 Bootstrap 创建具有恒定 div 宽度的响应行

javascript - 导航 CSS 样式不起作用

javascript - 使用 Javascript 扩展背景

html - 更改 Bootstrap 下拉以向右水平放置

css - 使用 CSS3 "background-size"是否可以加快页面渲染?

html - 如何使用 CSS 不透明度让背景在 IE8 中渗透?

javascript - Html 打印为 PDF - 如果表格在第二页上拆分,则不应用 Css