Question

这是一个非常基本的问题，但我根本无法解决这个问题。我在bootstrap框架中设置了一个h1标题，但是无法将其转到： - 住在市中心 - 在较小的屏幕上缩小它

任何帮助将不胜感激！

我的css：

    .itsthisone h1 {
  background-color: #fff;
  border: 6px solid #dfdfdd;
  color: #f47d41;
  font-size: 18px;
  margin-left: auto ;
  margin-right: auto ;
  padding: 20px 0;
  position: absolute;
  top: -34px;
  text-align: center;
  width: 720px;
}

@media (max-width: 479px) {
  .itsthisone h1 {
font-size: 14px;
  top: -15px;
  margin-left: auto ;
  margin-right: auto ;
  padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .itsthisone h1 {
    font-size: 14px;
    width: 360px;
  }
}

我的HTML：

<section class="itsthisone">
    <h1>keep it in center!</h1>

提前致谢！（＆lt; / section＆gt;似乎从代码中消失了）

Answer 1

你可以这样做：

逻辑：移动50％的绝对容器并放置容器宽度的一半负边距，然后获得容器相对于其父容器的中心。（静态方法）

<强> CSS

.itsthisone h1 {
  background-color: #fff;
  border: 6px solid #dfdfdd;
  color: #f47d41;
  font-size: 18px;
  padding: 20px 0;
  position: absolute;
  top: -34px;
  text-align: center;
  width: 720px;
  left: 50%;
  margin-left: -360px;
}

@media (max-width: 479px) {
  .itsthisone h1 {
    font-size: 14px;
    top: -15px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .itsthisone h1 {
    font-size: 14px;
    width: 360px;
    left: 50%;
    margin-left: -180px;
  }
}

<强> DEMO HERE

以h1＆＃39;按钮为中心

1 个答案: