問題居中映像？

我試圖將我的圖片「Logo_Home.svg」居中在我的頁面上，但由於某種原因，它無法正常工作，正坐在左上角。有沒有人知道我在哪裏錯了，並可以指引我朝着正確的方向發展？問題居中映像？

謝謝。

EDIT 1

我剛添加的類到圖像標記作爲我忘記它，但它仍然是不只是水平地垂直居中。有人知道怎麼修這個東西嗎？

編輯2

它是我試圖實現的例子。

body { 
 
    margin: 0; 
 
    background-image: url(http://pa2.site.com/IMAGES/Background.svg); 
 
    background-repeat: repeat; 
 
} 
 

 
li { 
 
    float: right; 
 
    list-style-type: none; 
 
    border: 2px solid #2f8fcb; 
 
    border-radius: 10px; 
 
    background-color: #2f8fcb; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 200px; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    margin-right: 40px; 
 
    margin-top: 40px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
} 
 

 
img.center { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<ul> 
 
    <li>REGISTER</li> 
 
    <li>LOGIN</li> 
 
</ul> 
 

 
<img src="http://pa2.site.com/IMAGES/Logo_Home.svg" class="center">

來源

2017-05-16 G.Hamton

你有img.center，但你沒有img標籤中的類。 – tech2017

剛剛更新了帖子，還是不太正確？ –

你可以添加padding-top：20px;使其更好。不知道這是否適合你。你可以添加一個圖像你期望 – tech2017

body { 
 
    margin: 0; 
 
    background-image: url(http://pa2.sulmaxcp.com/IMAGES/Background.svg); 
 
    background-repeat: repeat; 
 
} 
 

 
li { 
 
    float: right; 
 
    list-style-type: none; 
 
    border: 2px solid #2f8fcb; 
 
    border-radius: 10px; 
 
    background-color: #2f8fcb; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 200px; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    margin-right: 40px; 
 
    margin-top: 40px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
} 
 

 
.contain { 
 
    padding-top:20%; 
 
} 
 
img.center{ 
 
    display:block; 
 
    margin: 0 auto; 
 
}

<ul> 
 
    <li>REGISTER</li> 
 
    <li>LOGIN</li> 
 
</ul> 
 

 
<div class="contain"> 
 
<img src="http://pa2.sulmaxcp.com/IMAGES/Logo_Home.svg" class="center"> 
 
</div>

我把你的IMG一個div裏面使用的margin-top

來源

2017-05-16 18:17:13 Carter

這似乎讓你在做什麼垂直居中尋找：

ul { 
    float: right; 
    margin: 0; 
} 

img.center { 
    clear: both; 
    display: block; 
    margin: 0 auto; 
}

Demo

來源

2017-05-16 18:26:05

我嘗試使用柔性盒來解決這一點，它似乎已經完成了帽子戲法。我開始通過將圖像封裝在中心類的div中。然後我應用這個CSS來實現居中內容：

div.center{ 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    height:70vh; 
    width:90vw; 
}

看一下這個jsfiddle。

來源

2017-05-16 18:29:22 trav

問題居中映像？

回答

相關問題