對齊img和h1不管網頁的大小

Question

試圖將圖像（徽標）放在標題中的文本（商戶名稱）旁邊。當頁面很小時看起來很好，但是當頁面佔用較大的計算機屏幕時，圖像和文本之間的空間太大。

試圖讓文本保持居中放置在頁面上，並且圖像將自己對齊到文本的左側。

<style> 
img { 
    float: left; 
    width: 90px; 
    height: 90px; 
    padding-left: 16%; 
    } 
h1 { 
    color: #0C234B; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    font-family: sans-serif; 
    font-size: 197%; 
    } 
</style> 

<header> 
<img src="logo.png"/> 
    <h1>Name of Business</h1> 
</header> 

Answer 1

margin-left: auto;應該是原因。

Answer 2

我相信，這會給你想要的東西：

<style> 
    img { 
    width: 90px; 
    height: 90px; 

    position: absolute; 
    left: -90px; 
    } 
    h1 { 
    color: #0C234B; 
    text-align: center; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    font-family: sans-serif; 
    font-size: 197%; 

    display: inline-block; 
    width: auto; 
    position: relative; 
    padding-left: 10px; 
    } 

    header { 
    text-align: center; 
    min-width: 500px; /* Optional */ 
    } 
</style> 

<header> 
    <h1><img src="logo.png" /> Name of Business</h1> 
</header> 

重要特徵是文本還是恰好居中（因爲position: absolute圖像從頁面流中移除），但距離圖像和徽標之間的距離由h1填充。