Question

我正在写一个简单的简历，我正在编写一个小网页，向可能的雇主展示我的技能。我只有17岁，希望能在网络开发方面获得学徒。

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

我将如何做到这一点？我可以提供代码作为一个新页面。

编辑：是的，完成后不正确对齐文本。

我在IMGUR PICS中输出代码链接，因为我无法发布＆gt; 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/

HTML＆amp; CSS - 文字和图片

1 个答案: