oneman oneman - 19 days ago 5
CSS Question

How can I add text to a div without affecting the surrounding text?

I'm trying to add the burger button icon to my header. Before I add it, my

Example Title
is centred. After I add the icon,
Example Title
is pushed a little to the right.

I want
Example Title
to remain centred even with the icon in place.

I have put

* {
margin: 0;
padding: 0;
}


In my style sheet, but it doesn't help in this case.

Here is a visual example of my problem.

Before icon
enter image description here

After Icon
enter image description here



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




Answer

position: absolute; will help.

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

Comments