1
我正在製作一個歡迎頁面。如何在桌面上進行移動時在移動設備上放置圖像？
我有這個圖像，似乎集中在桌面上。
桌面視圖：
然而，移動的看法是可怕的：
移動視圖：
所以..我們可以看到ima ge沒有正確居中。現在，我可以用黑客來解決這個問題，但黑客只是從我學習正確的方式中解脫出來。
如何將圖像置於移動設備和桌面上？
我的代碼：（profits.png需要爲中心）
<div style="text-align: center">
<h1 id='format' style="margin-top: 80px;">Welcome to example</h1>
<p id='format' style="">follow up</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<input type="text" placeholder="Type a username" style="font-size: 30px; text-align: center;" align="center">
<button id="playbutton">Play</button>
<br>
<br>
<h2 id="format">Why us?</h2>
<p id="format">comming soon</p>
<br>
<img src="images/profits.png" style="height: 165px; width: 650px;">
<br>
<p id="format">...</p>
<p style="font-size: 150px;margin-top: 20px"><i class="fa fa-mobile" aria-hidden="true"></i> <i class="fa fa-desktop" aria-hidden="true"></i></p>
</div>
<style>
@font-face {
font-family: 'Helvetica Neue';
src: url('fonts/HelveticaNeue.ttf');
src: url('fonts/Helvetica Neu Bold.ttf');
src: url('fonts/HelveticaNeue BlackCond.ttf');
src: url('fonts/HelveticaNeue Light.ttf');
src: url('fonts/HelveticaNeue Medium.ttf');
src: url('fonts/HelveticaNeue Thin.ttf');
src: url('fonts/HelveticaNeueBd.ttf');
src: url('fonts/HelveticaNeueHv.ttf');
src: url('fonts/HelveticaNeueIt.ttf');
src: url('fonts/HelveticaNeueLt.ttf');
src: url('fonts/HelveticaNeueMed.ttf');
}
#format{
text-align: center;
color: white;
font-family: 'Helvetica Neue'
}
img{
display: block;
margin: 0 auto;
}
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
input:focus{
outline: none;
}
</style>
我假設你profits.png對左邊和右邊空的空間？你必須裁剪。 –
@ShadowFiend嗯，是的，我認爲你是對的。 – fastquak
@fastquak看看[this]（https://jsfiddle.net/n75bv3qj/8/）。 –