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

Posted 2023-03-06

【中文标题】如何在不影响周围文本的情况下向 div 添加文本？

【英文标题】：How can I add text to a div without affecting the surrounding text?

【发布时间】：2017-03-30 03:44:01

【问题描述】：

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

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

我放了

* 
margin: 0;
padding: 0;

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

这是我的问题的直观示例。

图标前

在图标之后

* 
	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;

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

【问题讨论】：

margin-left:-20px 因为它被向右推了 20px 。或者如果你说你必须在你的 div 中添加更多内容并且标题仍然在中心，那么你可以考虑做一些像水印一样的事情。它是通过重叠 div 来完成的。在一个 div 中有标题，在另一个 div 中有其他内容，然后使用 z-index 和绝对位置来重叠 div

@Reddy margin-left:-20px; 放置在#title p 中时无效，并且当放置在#navbut 中时它会从屏幕上移除汉堡图标

除非绝对定位，否则项目几乎总是会影响其兄弟姐妹。我建议将position: relative; 放在#title 上，并使用display: block; position: absolute; 以及top 和left 作为您的按钮。

链接：-***.com/questions/5662178/…

【参考方案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>

【参考方案2】：

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

就像：

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


#title 
  position: relative;

* 
	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;

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

希望这会有所帮助！

【讨论】：

它确实有效，但@Ron.Basco 先发布，所以会得到接受的答案。不过还是谢谢你

【参考方案3】：

我抓住了你的问题，并从我这边提出了一个更好的解决方案，希望它能帮助你。

* 
			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;
		

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

【参考方案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;