I have a student who is really into css and making his page look good. I can’t figure out how to get his heading/paragraph for “robotics” centered next to his image. Can anyone help?https://codeprojects.org/beE3po3Wu3UCkMGoKu1R5OoseevPc3PK6YLWlff9oio/
1 Like
Hi, don’t know if you had a response or found a solution but you are to use the center tags before the header tags and after.
7 Likes
I had the same question. I used the break tag and adjusted the font size. I am sure there is a more sophisticated method but I wanted to use what the kids had learned up to that point.
1 Like
So, I realize the original post is over 2 years old, but for future reference, here is a reworked version of the page:
https://codeprojects.org/_le6qbQ4HYj1r8XpSnSOIlN8Ui80NaRuEiKJASuIrnI
I accomplish the centering by assigning a width to each element in terms of percentage and then an equal left and right margin. If the image was 20%, the left and right margins were 40% each.
Probably beyond the scope of CSD Unit 2, but using percentages rather than a specific # of pixels tends to work better especially on different screen sizes.
Certainly more than one way to accomplish the task, but css can be a very powerful tool!
Mike
Thank you, Mike, for your response. I am learning alongside my students and it’s been a great journey so far. I will try out the percentages and share with my students.
Regards,
Tobin
Can anybody explain how to put text in between two images, like at the top of a page?
Image, text image?
Hi @chadwicko !
This is a little beyond the scope of what CSD Unit 2 covers, but one way to do it would be to float the first image to the left, put in your text, and then float the second image to the right. I’m guessing there may be more than one way to do this (and a better way), but check out this example.
Others may chime in on other ways of doing this!
Wendy
@wendybunker’s example is definitely one way to do it. HTML and CSS are very flexible in the sense that there are often multiple ways to approach a problem.
Another way to do it is to change the way the text is displayed. Text elements are considered block elements (meaning they start a new line), but you can force them to be inline elements by using this code in the css:
h1 {display: inline;}
Then, you can use an <img> followed by the <h1> and then another <img>
Since images are already inline elements, that will work without using floats. If the text is too long, I believe it will wrap, so it’s a good solution when you have short text such as a 1st level heading (h1).
Good luck!
Mike
2 Likes