1. 首頁
  2. 問答
  3. 你如何居中一張圖片並左對齊正在接觸上述圖片的文字？ HTML5

你如何居中一張圖片並左對齊正在接觸上述圖片的文字？ HTML5

2015-09-13 49 views
2

這本書很混亂......我又回到了另一個問題。你如何居中一張圖片並左對齊正在接觸上述圖片的文字？ HTML5

這本書顯示了最終章的章節圖片，顯然我遇到了問題。

問題1：我需要居中一張圖片（我知道如何做到這一點），但我不知道的是如何在圖片之後左對齊一個句子。通過後，我的意思是它看起來像這樣的畫面： Image

但居中的文本需要被左對齊的圖像，並且當它到達頁面的末尾時，它的畫面，而不是下的文本居中。

我很確定這與我的包裝有關，但我不是100％確定它是什麼。

控制下面視覺的東西最

CSS文件：現在

header { 
    background-color: #ccaa66; 
    color: #000000; 
    text-align: center; 
} 

h1 { 
    line-height: 200%; 
} 

body { 
    background-color: #ffffaa; 
    color: #330000; 
    font-family: Verdana; 
    background: url(background.gif); 
    padding: 25px; 
} 

nav { 
    text-align: center; 
} 

footer { 
    background-color: #ccaa66; 
    color: #000000; 
    font-size: 0.60em; 
    font-style: italic; 
    text-align: center; 
    padding: 5px; 
} 

#wrapper { 
    background-color: #ffffaa; 
    margin-right: auto; 
    margin-left: auto; 
    width: 80%; 
    min-width: 700px; 
    max-width: 1024px; 
} 

h2 { 
    background-color: #ccaa66; 
    font-size: 1.2em; 
    padding-left: 10px; 
    padding-bottom: 5px; 
} 

.details { 
    padding-left: 20%; 
    padding-right: 20%; 
} 

img { 
    border: 0px solid; 
}

，我加載的html頁面是有問題，是一個"music"頁，因爲我真的不能全部上傳你需要完全構建頁面所需的必要項目，我將不得不靠智慧來說話。

的music.html頁面編碼是這樣的：

<!DOCTYPE html> 
<html lang="en"> 

<link rel="stylesheet" href="javajam.css"> 

<header> 
    <title> JavaJam Coffee House Music</title> 
    <meta charset="utf-8"> 
    <h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1> 
</header> 

<nav> 
    <a href="index.html">Home</a> &nbsp; 
    <a href="menu.html">Menu</a> &nbsp; 
    <a href="music.html">Music</a> &nbsp; 
    <a href="jobs.html">Jobs</a> 
</nav> 

<body> 
    <div id="wrapper"> 
    <p> The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won't want to miss! </p> 
    <h2> January </h2> 
    <p align="center"><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p> 
    <h2> February </h2> 
    <p align="center"><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p> 
    </div> 
</body> 

<footer> 
    <em>Copyright &copy 2014 JavaJam Coffee House</em> <br> 
    <a href="mailto:[email protected]">[email protected]</a> 
</footer> 

</html>

我真正尋找的是隻是一種方法，使圖片顯示了已在文本跟隨畫面的右下方，並當它到達頁面的"end"時，它會回到圖片下方，而不是居中對齊。也就是說，<br>就是在那裏，如果能讓文字明星重新回到畫面下方，那就太好了。

如果您需要更多信息，我會盡我所能提供，但正如我前面所說，我無法在作業中給出實際圖片。

來源

2015-09-13 John Olivas

回答

1

我在網頁的標記中發現了一些錯誤。

這是對您的HTML的更正。

我添加了一個帶有內容類的div標籤。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="style.css" /> 
    <title> JavaJam Coffee House Music</title> 
</head> 

<body> 
    <header> 
     <h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1> 
    </header> 

    <nav> 
     <a href="index.html">Home</a> &nbsp; 
     <a href="menu.html">Menu</a> &nbsp; 
     <a href="music.html">Music</a> &nbsp; 
     <a href="jobs.html">Jobs</a> 
    </nav> 

    <div id="wrapper"> 
     <p> 
      The first Friday night each month at JavaJam is a special night. Join us from 
      8pm to 11pm for some music you won't want to miss! 
     </p> 
     <h2> January </h2> 
     <div class="content"> 
      <p><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p> 
     </div> 
     <h2> February </h2> 
     <div class="content"> 
      <p><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p> 
     </div> 
    </div> 
    <footer> 
     <em>Copyright &copy; 2014 JavaJam Coffee House</em> <br> 
     <a href="mailto:[email protected]">[email protected]</a> 
    </footer> 
</body> 
</html>

我添加了一個css類«.content»來居中內容。

header { 
    background-color: #ccaa66; 
    color: #000000; 
    text-align: center; 
} 

h1 { 
    line-height: 200%; 
} 

body { 
    background-color: #ffffaa; 
    color: #330000; 
    font-family: Verdana, sans-serif; 
    background: url(background.gif); 
    padding: 25px; 
} 

nav { 
    text-align: center; 
} 

footer { 
    background-color: #ccaa66; 
    color: #000000; 
    font-size: 0.60em; 
    font-style: italic; 
    text-align: center; 
    padding: 5px; 
} 

#wrapper { 
    background-color: #ffffaa; 
    color: inherit; 
    margin-right: auto; 
    margin-left: auto; 
    width: 80%; 
    min-width: 700px; 
    max-width: 1024px; 
} 

h2 { 
    background-color: #ccaa66; 
    color: inherit; 
    font-size: 1.2em; 
    padding-left: 10px; 
    padding-bottom: 5px; 
} 

.details { 
    padding-left: 20%; 
    padding-right: 20%; 
} 

img { 
    border: 0px solid; 
} 

.content { 
    margin: 0 auto; 
    width: 600px; 
}

我希望這可以幫助你。

來源

2015-09-13 05:43:13

+1

是的！謝謝！ ：D書並沒有真正說明保證金的實際用途，不知怎的，我在中間那邊是你如何修正它。謝謝你！ :) –

相關問題

 相關問題