如何將h1中的img元素居中，當圖像是100％的屏幕寬度並始終保持寬高比？ This pen shows what I mean。我在這裏看到了一些答案，但圖像的寬度和高度總是固定的。中心h1垂直和水平在一個img元素中

2016-12-01 sanjihan

img-element不允許任何內容https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img也許你只需要一個背景圖像與CSS？ – Esko

嘗試設置相對於包裝div的位置，並將絕對位置設置爲h1。 –

尋求代碼幫助的問題必須包括在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-可運行的JavaScript-CSS-和HTML的代碼段/）。 –

實現你的目標，你需要把兩個IMG和H1到一個div並使用定位居中H1

#headerImage { 
 
    width:100%;   
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    background-position:center; 
 
    background-repeat:no-repeat; 
 
    } 
 

 
#greeting{ 
 
    
 
    padding: 0px; 
 
    position: relative; 
 

 
} 
 

 
#greetin-h1{ 
 
text-align: center; 
 
color:#000; 
 
    position: absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    z-index: 9999; 
 
    
 
}

<div id="greeting"> 
 
    <img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/> 
 
    <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1> 
 
</div>

來源

2016-12-01 13:17:36 Chiller

男人！你救了我！ 3小時嘗試不同的解決方案，沒有運氣！ –

很高興幫助:) – Chiller

問候添加CSS樣式

#greetin { 
      padding: 140px 20px 50px 20px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      }

來源

2016-12-01 13:16:17 style28

爲什麼不使用圖像作爲背景？

html, body{ 
 
    width: 100vw; 
 
} 
 
#greeting{ 
 
padding: 140px 20px 50px 20px; 
 
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#greetin-h1{ 
 
    text-align: center; 
 
    color:black; 
 
}

\t <div id="greeting"> 
 
\t \t <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1> 
 
\t </div>

來源

2016-12-01 13:17:44

爲了解決爲什麼不使用背景圖像的問題？我真的想要在它的東西alt屬性。 – sanjihan

喜歡什麼樣的屬性？我們可能可以讓它們反正 –

alt屬性。有人說這是ALT標籤。它不是爲背景圖片定義的，因爲背景圖片是裝飾性的。 – sanjihan

.wrapper { 
 
    position: relative; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: gold; 
 
}

<div class="wrapper"> 
 
    <img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt=""> 
 
    <h1>Hello, World!</h1> 
 
</div>

來源

2016-12-01 13:18:32 jlowgren

謝謝，但圖像不是全屏寬度。 – sanjihan

背景大小：封面使其與容器一樣大，所以如果容器覆蓋整個屏幕寬度，圖像也會如此。 –

使用像這樣的相對和絕對定位，表和表存儲單元顯示的組合：

CSS：

#headerImage { 
    position: relative; 
    text-align: center; 
    display: inline-block; 
} 
#headerImage img { 
    max-width: 100%; 
} 
#greeting { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 
#greetin-h1 { 
    margin: 0; 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#greetin-h1 span { 
    display: table-cell; 
    vertical-align: middle; 
}

HTML：

<div id="headerImage"> 
    <div id="greeting"> 
     <h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1> 
    </div> 
    <img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""> 
</div>

小提琴：https://jsfiddle.net/ve8sot21/1

這樣的H1將始終水平居中和垂直無論圖像尺寸。

來源

2016-12-01 13:45:42

中心h1垂直和水平在一個img元素中

回答

問候添加CSS樣式

相關問題