gpt4 book ai didi

html - 如何使标题居中?

转载 作者:太空宇宙 更新时间:2023-11-04 10:01:54 25 4
gpt4 key购买 nike

菜单按钮将标题推到一边。我该如何解决标题忽略插入的问题?代码如下。我听说过 clear 但它不起作用。是元素的填充还是边距?

html {
height: 100%;
width: 100%;
}

body {
background: linear-gradient(to bottom, #0e4675 25%,#00215a 75%);
}

#in {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

main {
width: 80%;
margin-left: auto;
margin-right: auto;
}

#header {
border-bottom: 3px solid #ffffff;
}

#heading {
font-family: "Open Sans";
color: #ffffff;
text-transform: uppercase;
border: 5px solid #ffffff;
display: inline-block;
padding-bottom: 4px;
padding-left: 6px;
letter-spacing: 0.01em;
padding-right: 6px;
margin-top: 16px;
transition: all 1.5s;
display: inline-block;
clear: both;
}

#navigationbutton {
float: left;
clear: both;
display: inline-block;
width: 38px;
height: 38
}

.text {
color: #ffffff;
}
<body>
<div id="app">
<div id="in">
<header id="header">
<h1 id="heading">App-Title</h1>
<img id="navigationbutton" src="media/image/navigation.svg">
</header>
<main id="main">
<div id="textarea">
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</main>
</div>
</div>
</body>

最佳答案

也许您需要使“标题”成为具有相对位置的 block ,并导航到具有绝对位置的 block :

html {
height: 100%;
width: 100%;
}

body {
background: linear-gradient(to bottom, #0e4675 25%,#00215a 75%);
}

#in {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

main {
width: 80%;
margin-left: auto;
margin-right: auto;
}

#header {
display:block;
border-bottom: 3px solid #ffffff;
position:relative;top:0;left:0;
}

#heading {
font-family: "Open Sans";
color: #ffffff;
text-transform: uppercase;
border: 5px solid #ffffff;
display: inline-block;
padding-bottom: 4px;
padding-left: 6px;
letter-spacing: 0.01em;
padding-right: 6px;
margin-top: 16px;
transition: all 1.5s;
display: inline-block;
clear: both;
}

#navigationbutton {

width: 38px;
height: 38px;
position:absolute;top:5px;left:5px;
}

.text {
color: #ffffff;
}
<body>
<div id="app">
<div id="in">
<header id="header">
<h1 id="heading">App-Title</h1>
<img id="navigationbutton" src="media/image/navigation.svg">
</header>
<main id="main">
<div id="textarea">
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</main>
</div>
</div>
</body>

关于html - 如何使标题居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38285629/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com