如何在不影响周围文本的情况下向div添加文本？

Question

我试图将汉堡按钮图标添加到标题中。在我添加之前，我的Example Title居中。添加图标后，Example Title向右推一点。

即使图标已就位，我希望Example Title保持居中。

我已经把

* {
margin: 0;
padding: 0;
}

在我的样式表中，但在这种情况下它没有帮助。

以下是我的问题的视觉示例。

之前的图标

图标之后

＆＃13;

＆＃13;

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
}

#navbut {
	cursor: pointer;
	font-size: 20px;
}

#title {
	width: 100%;
	background-color: #373737;
	color: #f4f4f4;
	padding: 5px 0;
	display: table;
	text-align: center;
	font-size: 4em;
}

#title p {
	display: table-cell;
	vertical-align: middle;
}

＆＃13;

<div id="title">
<span id="navbut">&#9776;</span>
<p>Example Title</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

position: absolute;会有所帮助。

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
}

#navbut {
	position: absolute;
    left: 0;
    top: 0;
}

#title {
    position: relative;
	width: 100%;
	background-color: #373737;
	color: #f4f4f4;
	padding: 5px 0;
	display: table;
	text-align: center;
	font-size: 4em;
}

#title p {
	display: table-cell;
	vertical-align: middle;
}

<div id="title">
<span id="navbut">&#9776;</span>
<p>Example Title</p>
</div>

Answer 2

使用absolute定位到#navbut和relative定位到#title。

就像：

#navbut {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

#title {
  position: relative;
}

＆＃13;

＆＃13;

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
}

#navbut {
	cursor: pointer;
	font-size: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#title {
	width: 100%;
	background-color: #373737;
	color: #f4f4f4;
	padding: 5px 0;
	display: table;
	text-align: center;
	font-size: 4em;
    position: relative;
}

#title p {
	display: table-cell;
	vertical-align: middle;
}

＆＃13;

<div id="title">
<span id="navbut">&#9776;</span>
<p>Example Title</p>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 3

我抓住你的问题并从我这边做出更好的解决方案，希望它能帮到你。

＆＃13;

＆＃13;

* {
			margin: 0;
			padding: 0;
		}

		body {
			text-align: center;
		}

		#navbut {
			cursor: pointer;
			font-size: 20px;
			position: absolute;
			top: 30px;
			left: 20;
		}

		#title {
			width: 100%;
			background-color: #373737;
			color: #f4f4f4;
			padding: 5px 0;
			display: table;
			text-align: center;
			font-size: 4em;
			position: relative;
		}

		#title .exapmle-title {
			display: table-cell;
			vertical-align: middle;
		}

＆＃13;

<div id="title">
	<div id="navbut">&#9776;</div>
	<div id="example-title">Example Title</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

元素通常会受到兄弟姐妹的影响，除非你“脱离流动”。在您的情况下，您可能希望使用display: block;来确保div响应您的位置属性position: absolute;以允许它独立于兄弟姐妹，并position: relative;到将跨度相对于其父级而不是页面定位。

这样的事情：

#navbut {
    cursor: pointer;
    font-size: 20px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
}

#title {
    width: 100%;
    background-color: #373737;
    color: #f4f4f4;
    padding: 5px 0;
    display: table;
    text-align: center;
    font-size: 4em;
    position: relative;
}

#title p {
    display: table-cell;
    vertical-align: middle;
}