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

h2 div vertical align

wrxue 2020-06-17 08:40:16 ‧ 2803 瀏覽

分享至

目前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;
}

listennn08 iT邦高手 5 級 ‧ 2020-06-17 08:44:04 檢舉

我看錯了不過應該沒人會這樣寫

Chris iT邦新手 3 級 ‧ 2020-06-25 23:30:07 檢舉

排版先排好一點

登入發表討論

直播研討會

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

直播中

3 個回答

listennn08

iT邦高手 5 級 ‧ 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

回應 2
分享
檢舉

wrxue iT邦好手 1 級 ‧ 2020-06-17 18:08:45 檢舉

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

listennn08 iT邦高手 5 級 ‧ 2020-06-17 20:25:18 檢舉

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

登入發表回應

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是怕某些瀏覽器看不懂。

回應 1
分享
檢舉

wrxue iT邦好手 1 級 ‧ 2020-06-17 18:07:42 檢舉

用了您的方法，它看起來還是差一點點

登入發表回應

CSScoke

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

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

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙