使用div下面的文字對齊div中的圖像

我查找了以前的答案，但幫助我卻找不到答案。使用div下面的文字對齊div中的圖像

HTML：

<section id="pane_one"> 
    <h1 id="logo">lel</h1> 
    <h2 id="hello"><span>Hello.</span> You&rsquo;ve reached my page.</h2> 
    </section>

CSS：

section#pane_one { 
    display: block; 
    position: relative; 
    width: 100%; 
    text-align: center; 
    min-height: 450px; 
    height: 700px; 
} 

h1#logo { 
    position: absolute; 
    z-index: 0; 
    width: 200px; 
    height: 200px; 
    background-color: #000; 
    text-indent: -9999px; 
    top: 35%; 
    left: 44.5%; 
    margin-top: -65px; 
    margin-left: -33px; 

    background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat; 

    background-size: 100%; 
    border-radius: 50%; 
    border: solid black; 
}

我如何設置它，這樣無論頁面的縮放，股利/圖像始終水平與下面的文本對齊它？

該網站是：http://libeclipse.me/

來源

2016-04-09 Awn

@theblindprophet你在兩個帳戶上都是錯誤的。如果將id應用於不同頁面中的不同元素並且您需要相應樣式（*雖然如果沒有其他上下文不需要，那麼在此特定片段中是正確的*），那麼使用id和tag進行定位可能具有意義。在它們之間放置一個空格時，它的目標就是一個'＃logo'，它是'h1'的後代，而不是它在它上面。 –

在h1#logo規則改變left到50%和margin-left到-100px

來源

2016-04-09 21:57:50

完美！謝謝。 – Awn

<html> 
<head> 
<style> 
section#pane_one { 
    display: block; 
    position: relative; 
    width: 100%; 
    text-align: center; 
    min-height: 450px; 
    height: 700px; 
} 

h1#logo { 
position:relative; 
    z-index: 0; 
    width: 200px; 
    height: 200px; 
    background-color: #000; 
    text-indent: -9999px; 
    top: 200px; 
display: inline-block; 
    background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat; 
    background-size: 100%; 
    border-radius: 50%; 
    border: solid black; 
} 

h2#hello { 
position:absolute; 
top:0px; 
width:100%; 
margin:auto; 
} 
</style> 
</head> 
<body> 
    <section id="pane_one"> 
    <h1 id="logo">lel</h1> 
    <h2 id="hello"><span>Hello.</span> You&rsquo;ve reached my page.</h2> 
    </section> 
    </body> 
<html>

回顧這一點，並記下緣：自動（居中的h2text絕對位置）並顯示：內聯塊（居中兔子圖像）。

刪除了h1＃徽標中存在的左側％和邊距。享受。

謝謝。

來源

2016-04-09 22:27:42

這對我不起作用。文本全部重疊在頁面的頂部。 – Awn

文本應該低於div，而不是其他方式。 – Awn

你有沒有嘗試改變頂部的;;屬性？使用百分比來計算價格。 –

使用div下面的文字對齊div中的圖像

回答

相關問題