Làm thế nào tôi có thể căn chỉnh hình ảnh và tiêu đề h1 một cách không ngờ?

Question

Tôi gặp vấn đề với việc cố gắng căn chỉnh hình ảnh và thẻ h1 với nhau trên một dòng. Tôi đã thử hiển thị: inline và inline-block chúng không hoạt động và chỉ tạo vùng chứa của cả hai. Tôi đã thêm chiều rộng lên 100% trên phần và vẫn không có gì. Float không hoạt động hoặc nếu nó đã làm, nó vít lên sự liên kết của trang. Tôi đang làm gì sai? Đôi khi thật khó hiểu tại sao nó không hoạt động như dự định và cần sự giúp đỡ.

HTML

<section> 
    <img id="me" src="assets/img/pose1.jpg" alt="A photo of me." /> 
    <h1>FOLLOW ME ON...</h1> 
</section> 

CSS

section{ 
    display:inline-block; 
    width:100%; 
} 
h1{ 
    position:relative; /*position wherever desired on the page*/ 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    font-weight:bold; 
    font-size:40px; 
    color:#FFFFFF; 
    background-color:#FFB405; 
} 

Answer 1

Thêm display: inline-block;-h1 tài sản của bạn, như tôi đã làm here.

Answer 2

Hãy thử điều này: -

h1{ 
position:relative; /*position wherever desired on the page*/ 
top:0; 
bottom:0; 
right:0; 
left:0; 
font-weight:bold; 
font-size:40px; 
color:#FFFFFF; 
background-color:#FFB405; 
display: inline-block; 
} 

Answer 3

Bạn có một số mâu thuẫn CSS trên h1 ...

này nên làm việc

section { 
    display: block; 
} 
h1 { 
    position:relative; /*position wherever desired on the page*/ 
    display: inline-block; 
    font-weight:bold; 
    font-size:40px; 
    color:#FFFFFF; 
    background-color:#FFB405; 
} 
section img { 
    display: inline-block; 
}