HTML & CSS - 文本和图片

Question

我正在写一份简单的简历，我正在将其编码到一个小网页中，以向可能的雇主展示我的技能。我只有 17 岁，希望成为 Web 开发的学徒。

现在，我的问题是，我在页面顶部的中央添加了一张我自己的图像，并且我试图在图像的两边包裹我的名字和姓氏。我为每个名称使用了一个列表，然后将它们的显示设置为内联，并将它们的列表样式设置为无。 This image is what I am currently at. This is what I want to achieve.

我将如何着手做这件事？我可以提供所需的代码，因为它是一个新页面。

编辑:是的，一旦完成，我将正确对齐文本。

我将代码链接放在 IMGUR 图片中，因为我无法发布 > 2 个链接。

Answer 1

您可以摆脱 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/