DIV 置中問題

css

student 2018-07-05 10:54:38 ‧ 2855 瀏覽

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

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

看更多先前的討論...收起先前的討論...

student iT邦新手 2 級 ‧ 2018-07-05 10:56:11 檢舉

watercool iT邦新手 5 級 ‧ 2018-07-05 11:05:53 檢舉

(有人答案比較好，但是不知道怎麼刪這筆留言)

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-07-05 11:27:19 檢舉

留言是無法刪除的～～

小魚 iT邦大師 1 級 ‧ 2018-07-05 12:03:47 檢舉

留言無法刪除, 只能改成空白...

小魚 iT邦大師 1 級 ‧ 2018-07-05 12:04:57 檢舉

善用F12, 可能就會發現問題.

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

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是很特別的元件，有自己的排版邏輯，然後用的參數也不一樣。

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Homura iT邦高手 1 級 ‧ 2018-07-05 11:55:03 檢舉

還真多用法

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邦新手 2 級 ‧ 2018-07-11 09:34:27 檢舉

感謝您，謝謝

登入發表回應

Homura

iT邦高手 1 級 ‧ 2018-07-05 11:05:16

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

.navbar > a{
    width: 100%;
}

回應 1
分享
檢舉

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

感謝您，謝謝

登入發表回應

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-07-05 11:16:41

最好多一層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;
}