如何讓我的圖片居中，而不會在html和css中重疊我的文本

Question

我有一個非常困難的時間讓我的圖片居中並且響應而沒有重疊我的文本。我該如何解決。

View the issue here

div.shadow { 
 
    position: absolute; 
 
    max-width: 45%; 
 
    max-height: 45%; 
 
    top: 50%; 
 
    left:50%; 
 
    overflow: visible; 
 
} 
 
img.logo { 
 
    position: relative; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    margin-top: -50%; 
 
    margin-left: -50%; 
 
} 
 
header { 
 
    text-align: center; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-size: 40px; 
 
    font-family: 'existencelight'; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding: 10px; 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 

 
      

<header> 
 
    <h1>Welcome to Nepali Kitchen</h1> 
 
</header> 
 
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>

Answer 1

您的DIV絕對位置，所以你可以調整最高值

div.shadow { 
position: absolute; 
max-width: 45%; 
max-height: 45%; 
top: 200px; /* just a sample with a fixed pixel value */ 
left:50%; 
overflow: visible; 
} 

，或者嘗試使用

position: relative; 

Answer 2

該圖像應該可能是背景。

header { 
 
    text-align: center; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-size: 40px; 
 
    font-family: 'existencelight'; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding: 40px; 
 
    margin: 0px; 
 
    width: 100%; 
 
    background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat; 
 
    background-size: contain; 
 
}

<header> 
 
    <h1>Welcome to Nepali Kitchen</h1> 
 
</header>

或者您也可以通過修改z-index的移動文本背後的形象。

div.shadow { 
 
    position: absolute; 
 
    max-width: 45%; 
 
    max-height: 45%; 
 
    top: 50%; 
 
    left: 50%; 
 
    overflow: visible; 
 
} 
 

 
img.logo { 
 
    position: relative; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    margin-top: -50%; 
 
    margin-left: -50%; 
 
    z-index: -1; 
 
} 
 

 
header { 
 
    text-align: center; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-size: 40px; 
 
    font-family: 'existencelight'; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding: 10px; 
 
    margin: 0px; 
 
    width: 100%; 
 
}

<header> 
 
    <h1>Welcome to Nepali Kitchen</h1> 
 
</header> 
 
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>

Answer 3

這是因爲你的元素的定位。

如果你想有一個固定的標題，你的內容需要被壓低到標題的高度。通過將你的內容包裝在一個容器中，然後給它一個margin-top，這相當於你的標題的height。

header { 
    position: fixed; 
    height: 100px; 
} 

.content-container { 
    position: relative; 
    margin-top: 100px; 
} 

而且你的HTML：

<header></header> 
<div class="content-container"> 
</div> 

給你的內容的容器position: relative。如果你想在中心放置物品，你可以使用flexbox或者給它一個margin: 0px auto;。

位置相對意味着它的位置相對於其他元素而言是。

一些其他的事情，我在你的代碼可以做的更好/清潔工注意到：

• 使用單位em或rem爲font-size
• 這不是必要的元素（DIV前綴你的類。陰影 - > .shadow和img.logo - > .logo）
• 另外我會建議您訂購您的CSS後CSS Box Model。這選擇了更簡潔的代碼和更好的可讀性。

這意味着你會得到這樣的事情：

.class { 
    // Positioning first 
    position: relative; 
    top: 0; 
    right: 0; 
    z-index: 1; 

    // It's size 
    width: 500px; 
    height: 500px; 

    // It's margin 
    margin: 0px auto; 

    // It's border 
    border: 1px solid blue; 

    // It's padding 
    padding: 2em 0; 

    // Content styling 
    color: #676766; 
    background: blue; 
} 

Answer 4

I don't know why you have written this complex css. It can be possible by some easy css coding. 

<style> 
div.shadow { 
    width: 100%; 
    float: left; 
    text-align: center; 
} 
img.logo { 

} 
header { 
    text-align: center; 
    color: black; 
    text-decoration: none; 
    font-size: 40px; 
    font-family: 'existencelight'; 
    width: 100%; 
    float: left; 
} 
</style>