HTML & CSS - Text and picture

Question

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.

You gotta show us some code. And what's the thinking behind using list instead of good old divs, or more semantically, a heading tag? — Sidd
– Sidd, Commented Apr 20, 2015 at 18:22
The standard way around here is to use jsfiddle.com - just paste your HTML body, JS and CSS into the boxes, and the fourth box will show the output when you click 'Run'. Then click save, and share the link here. — Sidd
– Sidd, Commented Apr 20, 2015 at 18:25

codyogden · Accepted Answer · 2015-04-20 18:35:30Z

2

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/

answered Apr 20, 2015 at 18:35

codyogden

7491 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

codyogden Over a year ago

Note that it would be better to give the img an ID instead of just putting the CSS I provided above in your main doc.

Kieran Rigby Over a year ago

Ahh that's perfect :D Will have to study that up so i can do it in the future. Simple stuff, I know, but we all start somewhere.

Kieran Rigby Over a year ago

Quick Q. How can I space out the words from the picture? I've tried divs but that messes it all up.

codyogden Over a year ago

You can use the padding-left & padding-right like I used in the CSS for img above. That will add space between the image and the text next to it on both sides.

Kieran Rigby Over a year ago

Done it! But now i can't seem to add the white border around the pic as the border is skewed with the padding

|

Collectives™ on Stack Overflow

HTML & CSS - Text and picture

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related