Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gabriel Ward
20,222 PointsAligning header and image.
I'm wanting to have these two separate h1 lines run either side of an image, so that they're all in one row, with the image centred on the horizontal axis.
Here's my HTML code:
<html> <head>
<div class="header title"><h1>Gabe's Home Page</h1></div>
<div class="runner title"><h1>A Portfolio</h1></div>
<div class="house title"><img src="logo.jpg" alt="HBKB Logo"></div>
</div>
</head>
What's the best way to do this in CSS?
Thanks!
4 Answers
Emma Willmann
Treehouse Project ReviewerI would do this using floats. This code isn't perfect, but should give you a starting point to play with:
<!DOCTYPE html>
<html>
<body>
<div>
<div class="header_title"><h1>Gabe's Home Page</h1></div>
<div class="house_title"><img src="http://i.stack.imgur.com/IutBB.jpg" alt="HBKB Logo"></div>
<div class="runner_title"><h1>A Portfolio</h1></div>
</div>
</body>
</html>
.header_title {
float: left;
width: 30%;
margin: 1.6666%;
}
.house_title {
float: left;
width: 30%;
margin: 1.6666%
}
.runner_title {
float: left;
width: 30%;
margin: 1.6666%;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear:both;
}
In order for the image to be in the middle, you need to change the order of your divs. 1st div should be your first h1, 2nd your image, and then 3rd, your second h1.
Gabriel Ward
20,222 PointsThanks Emma. This code works well.
I'm trying to learn as much as possible, so with that in mind, do you have any idea how this might be done with flexbox and/or multi-column layout techniques? I've been trying to work it out but to no avail, yet.
Emma Willmann
Treehouse Project ReviewerI am a little out of practice with coding, so I've been going through the css videos again. Haven't got quite that far. I'm sure you could do it with flexbox, but I don't think so with multi-column layout. From what I remember, that is for putting text into multiple columns like a newspaper.
Gabriel Ward
20,222 PointsOk thanks for your help.