Question

我创造了一个小提琴，以显示我的设计中的缺陷，我试图使响应。在那里你可以看到，HEADING IN CENTER没有在中心对齐。如果我移除位置，文本会居中，但颜色不会是白色，因为我在那里使用了叠加。此外，如果您点击汉堡包图标，顶部会显示空白区域。我该如何修理它们？

我使用语义ui作为框架。

HTML

<div class="ui grid nav">
  <div class="computer tablet only row computer-menu">
    <div class="ui inverted text fixed menu navbar page grid">
      <a href="" class="brand item">LOGO</a>
      <div class="right menu open">
        <a href="" class="menu item">
            <i class="content icon"></i>
        </a>
      </div>
    </div>
    <div class="ui vertical navbar menu">
        <a href="" class="active item">Home</a>
        <a href="" class="item">Blog</a>
        <a href="" class="item">Discussion</a>
    </div>
  </div>
  <div class="mobile only row mobile-menu">
      <div class="ui inverted fixed navbar text menu">
          <a href="" class="brand item">LOGO</a>
          <div class="right menu open">
              <a href="" class="menu item">
                  <i class="content icon"></i>
              </a>
          </div>
      </div>
      <div class="ui vertical navbar menu">
          <a href="" class="active item">Home</a>
          <a href="" class="item">Blog</a>
          <a href="" class="item">Discussion</a>
      </div>
  </div>
</div>
    <div class="ui main-segment">
  <section class="home-header show">
    <div class="overlay"></div>
    <div class="short-intro">
      <h1>HEADING IN CENTER</h1>
    </div>
    <div class="invitation">

    </div>
  </section>
 </div>

CSS

body {
  background: #e8e8e8;
}

.ui.inverted.menu{
  background: transparent !important;
}

@media (max-width: 767px) {
    .ui.grid.main{
        margin-top: 70px;
    }

  .ui.grid { margin: 0 !important; }
    .ui.vertical.menu.navbar{
        margin-top: 0px !important;
    }
}

.main-segment{
  padding: 0 !important;
}

.ui.vertical.menu{
    margin-top: 45px !important;
    width: 100%;
    display: none;
  background: rgb(32, 85, 109);
}

.vertical.menu a.item{
  color: #fff !important;
}

.computer-menu, .mobile-menu{
  padding-bottom: 0 !important;
}

.ui.grid+.grid {
     margin-top: 0 !important;
}

.ui.menu {
    font-size: 2rem;
    text-align: center;
}

.ui.grid.nav>.row{
  padding: 0 !important;
}

/* */
.ui.grid>*{
     padding-left: 0 !important;
     padding-right: 0 !important;
}

/* MENU */
.menu {
  float: right;
}

section.home-header.show {
    background: url('http://www.ics.com/sites/default/files/iot.jpg') center;
}

section.home-header {
    background: #000;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -moz-transition: 2s background-color;
    -o-transition: 2s background-color;
    -webkit-transition: 2s background-color;
    transition: 2s background-color;
}

.overlay {
    position: absolute;
    z-index: 2;
    background: url(../img/pattern.png),rgba(0,0,0,.5);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.request-invitation {
    background: #fff;
    z-index: 100;
    width: 25%;
    position: absolute;
    top: 50%;
    padding: 25px;
    color: rgba(27, 28, 29, 0.77);
    text-decoration: underline;
}

.short-intro {
    color: #fff;
    position: absolute;
    z-index: 100;
    font-weight: 900;
    text-align: center;
    margin: 10em 20em;
    /* left: 50%; */
}

.short-intro h1 {
    font-size: 4em;
}

以下是jsfiddle https://jsfiddle.net/qm2yn3gm/的链接。

更新

我很抱歉它的.short-intro不是.connyct-short-intro in css。我更新了我的小提琴。您可以看到文本可以在中心，但如果我添加位置：绝对，那么只有我可以有白色的文本。

Answer 1

更改以下课程

.short-intro h1 {
    font-size: 4em;
    text-align:center
}

这就是你想要的fiddle

<强>更新

仍在尝试了解您的问题，请查看this one

<强>更新

删除了热门空间问题check this

Answer 2

为课程申请text-align: center - 简介

.short-intro {
  text-align:center;
}

无法将文字置于标题

2 个答案: