我创建了一个 fiddle 来展示我试图做出响应的设计中的缺陷。在那里你可以看到,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 而不是 css 中的 .connyct-short-intro。我已经更新了我的 fiddle 。您可以看到文本可以居中,但如果我添加 position: absolute 则只有我可以使用白色文本。
最佳答案
改变下面的类
.short-intro h1 {
font-size: 4em;
text-align:center
}
这是你想要的吗fiddle
更新
仍在尝试了解您的问题,请查看 this one
更新
删除了顶部空间问题 check this
关于html - 无法将标题内的文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42871252/