周囲のテキストに影響を与えずにdivにテキストを追加するにはどうすればよいですか？

Question

私はヘッダーにバーガーボタンのアイコンを追加しようとしています。追加する前に、Example Titleが中央に配置されています。アイコンを追加したら、Example Titleが少し右に押し込まれます。

Example Titleは、アイコンが配置されていても中央に置いておきたいです。

私は自分のスタイルシートで

* { 
margin: 0; 
padding: 0; 
} 

を入れているが、それはこの場合には役立ちません。

ここに私の問題の視覚的な例があります。アイコンの前に

アイコン後

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t text-align: center; 
 
} 
 

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

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

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

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

Answer 1

position: absolute;が役立ちます。

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t text-align: center; 
 
} 
 

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

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

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

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

Answer 2

使用#navbutにabsolute位置決めと#titleにrelativeポジショニング。

だけのよう：

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

#title { 
    position: relative; 
} 

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
body { 
 
\t text-align: center; 
 
} 
 

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

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

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

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

・ホープ、このことができます！

Answer 3

エレメントは、「フローから外れていない」場合を除き、ほとんどの場合、兄弟の影響を受けます。あなたの場合、おそらく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; 
} 

Answer 4

私はあなたの問題をつかむと、私の側から解決策を改善するには、それはあなたを助けることを願っています。

* { 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t body { 
 
\t \t \t text-align: center; 
 
\t \t } 
 

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

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

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

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