HomeОбразованиеRelated VideosMore From: Filip Delac

How to Vertically Align Text next to an Image

199 ratings | 38463 views
Align those images and text! Perfectly align them next to each other using CSS magical magic :) Project Resources: http://www.mediafire.com/download/raktf1cxje34p17/How_to_vertically_align_text_next_to_an_image.7z Tools: Brackets, FREE code editor http://brackets.io/ Emmet, super speed coding addon http://emmet.io/ Beautify, turning your ugly code into beautiful script https://github.com/brackets-beautify/brackets-beautify Transcription: Hi guys, today we will vertically align text next to an image. So let's do it! First of all, let's import our image. I prepare some image in the description you have project files are in the description, so you can download it. It's a pretty big image but don't worry, it's a just a motherboard. Okay, just let's style these image a bit. We styled this image just say that are image size height. Height to be 100 pixels we just shrink our image, okay? And just added the span element. Span element ,and say this is a text. Okay, as you can see, this is the text is a bit down here and we want to be in the middle. Just and vertically align middle. Ta-da. This is it, guys. Don't go, there are few gems about this, as you can see, this is in in the middle and as you can see these blue is our in-line element. But, for example, what if we want to add our p tag? This is a problem, the problem is here. This p is below the image so if you want to add this p next to our image we just have to do these: Our p tag needs some modification, okay? We add display-inline. And this is it, as you can see if we select this tag. Our p tag acts like an inline element, just like our span element, and because the p tag is the block element, if we remove this, it will go down there. OK, just remove this, but if you say inline-block, it will also be up, but act as a block element as you can see, I can now select only the text. And if I selected this, it's a different, remember : this one here, the big one is inline and this one is a block element. It's a huge difference, and in my tutorial tutorials you can learn what is the difference between inline and block elements, so don't be scared and visit me there, and that's it guys and have a nice day, I hope this, I hope this help you, and bye-bye.
Html code for embedding videos on your blog
Text Comments (48)
Jason Patrick (2 months ago)
what do you use?
SpicyFruit (3 months ago)
thank you filip delac
Filip Delac (3 months ago)
You're welcome. Nice day!
Jimbo28 (3 months ago)
Muchas Gracias
Filip Delac (3 months ago)
You're welcome. Nice day!
Cherrie (4 months ago)
I LOVE YOU
Filip Delac (4 months ago)
Thanks! :D
The Middle Aged Marketer (4 months ago)
This was very helpful! However, I ran into one issue: When I had a long string of text, it wrapped back around and under the image. What's the best way to align all the text on one side of the image?
Filip Delac (4 months ago)
Hi. You can try adding <img style="float:right;"> you can better understand floats here: https://css-tricks.com/almanac/properties/f/float/ hope it helps! Cheers!
Ismail Ibrahim (4 months ago)
hi i really like the video , simple and clear but i just want to ask , i tried to do the inline-block thing and i tried to use it with <ul> <li></li><ul> (listing) instead of a normal text but it didnt work. Is it possible or not?
Filip Delac (4 months ago)
Hey, really good question. It's a bit trickier, but I think this article might help you with your problem: https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ Hope it helps. Cheers!
Sage Mulkey (4 months ago)
thanks for the help man, May God bless you
Filip Delac (4 months ago)
Thanks Sage! Have a nice day!
Ciero Kilpatrrick (5 months ago)
Thanks!
Filip Delac (5 months ago)
Glad it helped man! Have a nice day!
Ciero Kilpatrrick (5 months ago)
Especially for how quick that was.
Pino Li (7 months ago)
Why KOng Fuzi? lol
Pino Li (7 months ago)
I am meeting the issue, that I have a logo imag and a text "USA" next to it, then I add a serchbar next to them, the problem is that my searchbar conflict with them and they randomly jump to next line, how I keep them in one line ?
Pino Li (7 months ago)
I like the art of war also, happy for you liking it
Filip Delac (7 months ago)
Hahaha, it's a funny story. I was reading the art of war by Sun Tzu, so I rename my channel to Tech Tzu, like the art of WordPress, but I left that idea behind, so I googled Sun Tzu, and the rest you know :)
Aujc Ikkdsu (8 months ago)
nice intro
Filip Delac (7 months ago)
Thanks.
Andres Meza (9 months ago)
I'm wondering if you can tell me how to align text once I have it next to the image. I need to further format it so that it is nice and centered by itself next to the image. Thanks.
linda johnson (9 months ago)
wonderful, terrific and simple.
Filip Delac (9 months ago)
Thanks!
Gerald Foushee (1 year ago)
hi i wanted to have my text at the top not vertical but i did not even get an option.
Filip Delac (1 year ago)
Hi Gerald. You can find info about it here: https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af or try to ask a question on stack overflow. I'm sure some of the more experienced developers will help you. out. Hope it helps. Cheers!
Gerald Foushee (1 year ago)
Tech Tzu 👋... Well I was using flexbox and I want to have an image or picture in the top left and text on the right flowing down and under thr imagine if needed. Basically the way a news article might look. I have accomplished. This but I had to use float and I was wondering if I could avoid using float and making the image display inline. Let me know if this is not clear
Filip Delac (1 year ago)
Hi Gerald. Can you please give me more information?
Nathan GODARD (1 year ago)
Thx mate
Filip Delac (1 year ago)
You're welcome!
yk. (1 year ago)
A question... If i want to make something like a </br> so it comes to a new line after the <span> what do i have to do? Because if you use </br> its not in the img!
SpicyFruit (3 months ago)
LOL SAME
Money Pac (1 year ago)
Thank you so much brother! you are great
Filip Delac (1 year ago)
Thanks! Glad to hear that! Nice day!
Domain Portfolio (1 year ago)
Simple. Awesome!
Filip Delac (1 year ago)
Thanks! Nice day!
Wiktor Słomiński (1 year ago)
You're the best
Wiktor Słomiński (1 year ago)
Also thank you. Have a nice day :)
Filip Delac (1 year ago)
Thanks Wiktor. glad to hear that. Nice day!
Sidratul Moontaha (1 year ago)
How to align images vertically from the right top? :( like i want to add the images on right side of my screen...
Filip Delac (1 year ago)
You're welcome. No problem :) I search for you, try the best answer and if it fits. Then add some vertical-align to be on top. Here: https://stackoverflow.com/questions/5214893/right-align-an-image-using-css-html. One tip, try using https://stackoverflow.com/ for your issues, there are so many awesome developers to help you with this, and also, you can post code and check with fiddles if it works straight away. It's a bit tricky to use YT for this. Nice day and good luck!
Sidratul Moontaha (1 year ago)
Tech Tzu thank u so much *__* but i wanted to add two images vertically on right side..not text..
Filip Delac (1 year ago)
Hi Sidratul. You can use float:right for this kind of stuff. Here are some examples, hope it will help you: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_align_css
Reece Griffith (1 year ago)
Great Video! Thank so much. Nice editing too!
Filip Delac (1 year ago)
Thanks Reece!
TheAmazing Jon (2 years ago)
How do I align it to the top of the image and center it?
Filip Delac (2 years ago)
You can divide image and text into two divs and then center it. Try to play with div nesting, or just use table technique.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.