html - 如何使标题居中?

标签 html css

菜单按钮将标题推到一边。我该如何解决标题忽略插入的问题?代码如下。我听说过 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/

相关文章:

javascript - 如何为 table.rows.length 函数排除 html 表中的标题行?

jquery - 强制 div 由 JQuery 插入到容器中以保持在同一行

javascript - 检查 Html 是否与 Node-webkit 一起使用?

html - Bootstrap 向列添加边距

html - 表格不在该部分中流动,而是从中流出

javascript - jquery 建议或帮助将 flash 转换为 jQuery

jquery - 引导轮播堆叠图像和控件不起作用

html - 悬停时链接中的文本跳下 1px

html - CSS:在纯 CSS 箭头上制作边框

jquery - CSS 过渡与 Webkit 上的百分比宽度混淆(错误?)