HTML和CSS - 文本和圖片

我正在寫一個簡單的簡歷，我正在編入一個小型網頁，向可能的僱主展示我的技能。我只有17歲，希望在網站開發中獲得學徒。HTML和CSS - 文本和圖片

現在，我的問題是，我已經在頁面頂部的中心添加了自己的圖像，我試圖在圖像的任一側包裹我的姓和名。我爲每個名稱使用了一個列表，然後將它們的顯示設置爲內聯，並將其列表樣式設置爲無。 This image is what I am currently at. This is what I want to achieve.

我該如何去做這件事？我可以提供代碼，因爲它是一個新的頁面。

編輯：是的，生病完成後正確對齊文本。

我將IMGUR PICS中的代碼鏈接放置爲「我無法發佈」> 2鏈接。

來源

2015-04-20 Kieran Rigby

你得給我們看一些代碼。那麼使用列表而不是舊的div，或者更多的語義標題標記是什麼？ – Sidd

好吧，虐待現在的文檔:) –

這裏的標準方法是使用http://jsfiddle.com/ - 只需粘貼您的HTML正文，JS和CSS到框中，第四個框將顯示輸出時你點擊'運行'。然後點擊保存，然後在這裏分享鏈接。 – Sidd

您可以完全擺脫了li的和做的div與vertical-align:middle;像這樣：

HTML：

<div class="container"> 
    Kieran<img src="http://i.imgur.com/2cEiTiu.jpg" height="150" width="150" />Rigby 
</div>

CSS：

.container { 
    width:80%; 
    margin-right:auto; 
    margin-left:auto; 
    text-align:center; 
} 
img { 
    border-radius:50%; 
    vertical-align: middle; 
    padding-left:4em; 
    padding-right:4em; 
}

結果：http://jsfiddle.net/codyogden/9mmteper/

來源

2015-04-20 18:35:30 codyogden

請注意，最好給'img'一個ID，而不是將上面提供的CSS放在主文檔中。 – codyogden

啊，這是完美的：D將不得不研究這個，所以我可以在未來做到這一點。簡單的東西，我知道，但我們都開始在某個地方。 –

Quick Q.我怎樣才能將圖片中的文字分開？我已經嘗試過div，但是這一切都弄糟了。 –

HTML和CSS - 文本和圖片

回答

相關問題