iT邦幫忙

0

請問要怎麼讓在h2裡的div垂直置中

https://ithelp.ithome.com.tw/upload/images/20200617/20117357ApclUJyasp.png
目前HTML

<h2 class="lead p-3 mb-2 bg-dark text-white">
    <a href="/" style="text-decoration:none;">Welcome to system</a>       <div id="logout">
        <a href="/user/logout" class="btn btn-dark" style="text-decoration:none;">Logout</a>
    </div>
</h2>

目前CSS

#logout{
    position: absolute;
    top: 0; bottom: 0;
    right: -1px;
    height: inherit;
    vertical-align: middle;
}
我看錯了 不過應該沒人會這樣寫
Chris iT邦新手 4 級 ‧ 2020-06-25 23:30:07 檢舉
排版先排好一點
0
listennn08
iT邦高手 7 級 ‧ 2020-06-17 08:55:04
最佳解答

雖然基本上不會拿 h2 去包 div 或是我見識比較少 XD
不過針對你的問題回答

h2 {
    display: flex;
    align-items: center;
    position: relative;
}
#logout {
    position: absolute;
    right: -1px;
}

demo 補充只用 bootstrap class 的做法
demo

wrxue iT邦研究生 3 級 ‧ 2020-06-17 18:08:45 檢舉

我是參考github頭上的那條,但仔細看它是包在header裡面,有哪裡不一樣嗎?

h2 其實代表的是副標題 你放在 h2 的物件字體大小都沒改變啊 這樣用 div 放其實就可以了

4
froce
iT邦大師 1 級 ‧ 2020-06-17 09:18:22
.lead * {
      vertical-align: middle;
}

#logout {
  display: inline-block;
  position: absolute;
  right: 0;
}

你明明要指定vertical-align,但是又給#logout top:0,瀏覽器當然看不懂。
然後div是塊狀元素,一定會換行,不讓它變成inline就會強制換行。
不用flex是怕某些瀏覽器看不懂。

wrxue iT邦研究生 3 級 ‧ 2020-06-17 18:07:42 檢舉

https://ithelp.ithome.com.tw/upload/images/20200617/20117357tIwPgB4EQN.png
用了您的方法,它看起來還是差一點點

4
CSScoke
iT邦新手 4 級 ‧ 2020-06-21 00:18:08

這邊有CSS的25種垂直置中的方式,自己挑一個去用吧
https://ithelp.ithome.com.tw/users/20112550/ironman/2092

我要發表回答

立即登入回答