iT邦幫忙

0

DIV 置中問題

css

小弟最近在試著做網頁,遇到一個DIV置中問題,語法有這樣:
不知道為什麼  裏頭文字總是靠左對齊
想請問該怎麼解決呢?

.navbar {
display: flex;
background-color: #333;
text-align: center;
margin: 0px auto;


看更多先前的討論...收起先前的討論...
student iT邦新手 5 級 ‧ 2018-07-05 10:56:11 檢舉
<div class="navbar" >
<a href="#">首頁</a>
<a href="#">關於</a>
<a href="#">產品</a>
<a href="#">招募</a>
<a href="#">聯絡</a>
</div>
watercool iT邦新手 5 級 ‧ 2018-07-05 11:05:53 檢舉
(有人答案比較好,但是不知道怎麼刪這筆留言)
留言是無法刪除的~~
小魚 iT邦高手 1 級 ‧ 2018-07-05 12:03:47 檢舉
留言無法刪除, 只能改成空白...
小魚 iT邦高手 1 級 ‧ 2018-07-05 12:04:57 檢舉
善用F12, 可能就會發現問題.
1
froce
iT邦高手 1 級 ‧ 2018-07-05 11:49:58
最佳解答

https://jsbin.com/togamaqili/edit?html,output

因為你沒寫對flex的設定啊。
https://wcc723.github.io/css/2017/07/21/css-flex/

flex是很特別的元件,有自己的排版邏輯,然後用的參數也不一樣。

看更多先前的回應...收起先前的回應...
Homura iT邦研究生 3 級 ‧ 2018-07-05 11:55:03 檢舉

還真多用法
/images/emoticon/emoticon12.gif

froce iT邦高手 1 級 ‧ 2018-07-05 12:02:57 檢舉

flex很好用,不過要用的時候要擔心支援度,像 wkhtmltopdf似乎還不支援。
初學者還是建議先把inline-block或float佈局練好,通常inline-block會比較好佈。

froce iT邦高手 1 級 ‧ 2018-07-05 19:42:45 檢舉

然後我還蠻訝異居然沒人回正確答案...

student iT邦新手 5 級 ‧ 2018-07-11 09:34:27 檢舉

感謝您,謝謝

0
Homura
iT邦研究生 3 級 ‧ 2018-07-05 11:05:16

其實他有置中
因為你的<a>的width是隨著文字長度擴展的
所以你<a>的文字長度跟width一模一樣
你要把width弄長
加入下面這段

.navbar > a{
    width: 100%;
}
student iT邦新手 5 級 ‧ 2018-07-11 09:34:06 檢舉

感謝您,謝謝

0

最好多一層div去控制,避免被navbar的樣式限制住,應該是這樣吧…

html

    <div class="navbar">
        <div>
            <a href="#">首頁</a>
            <a href="#">關於</a>
            <a href="#">產品</a>
            <a href="#">招募</a>
            <a href="#">聯絡</a>
        </div>
    </div>

css

.navbar {
    display: flex;
    background-color: #333;
    text-align: center;
    margin: 0 auto;
}
.navbar div{
    text-align: center;
    border:1px solid white;
    width:100%;
}
.navbar div a{
    color:white;
}
student iT邦新手 5 級 ‧ 2018-07-11 09:34:15 檢舉

感謝您,謝謝

我要發表回答

立即登入回答