CODEWITHSUNDEEP
htmlcss
Kieran Rigby
Kieran Rigby

Reputation: 147

HTML & CSS - Text and picture

I am writing a simple CV which i am coding into a small web page to display my skills to possible employers. I am only 17 and hoping to get an apprenticeship in web development.

Now, my problem is, I have added an image of myself on the center of the top of the page and i'm trying to wrap my fore and surname on either side of the image. I have used a list for each name and then set their display to inline, and their list-style to none. This image is what I am currently at. This is what I want to achieve.

How will I go about doing this? I can provide the code is needed as its a fresh page.

EDIT: Yes, ill align the text properly once completed.

I PUT THE CODE LINKS IN THE IMGUR PICS AS I CANT POST > 2 LINKS.

Upvotes: 2

Views: 101

Answers (1)

codyogden
codyogden

Reputation: 749

You can get rid of the li and do it completely in a div with vertical-align:middle; like so:

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;
}

Result: http://jsfiddle.net/codyogden/9mmteper/

Upvotes: 2

Related Questions