There are times that you may need to use an image and text next to each other A good use case for this could be user prof ile image or a n information car d Alig ning the image and text vertic ally in this s itu ation would be simple and easy. So , let ’ s just dive into it! First , we will create our html markup. If you use VS C od e , you just need to create a file with any name you prefer and add .html extension to it, like index.html Then just typ e html and v s code IntelliSense will help you to create the starter html markup by selecting the html:5 option on the dropdown. O k , for this example we are g oing to have an image and s ome text which wil l be wrappe d in a container div , so it will be look like this : < html lang = " en " > < head > < meta charset = " UTF - 8 " > < meta http - equiv = " X - UA - Compatible " content = " IE=edge " > < meta name = " viewport " content = " width=device - width, initial - scale=1.0 " > < title >Document < body > < div class = " container " > I ns i de the body tag, we c rea te d a di v with the class of container So far so good! Ok, let ’ s now add an image tag inside our container div B efore th at, let ’ s add an image to our f older, fo r me it ’ s profile.png , so: W e give the src attr ibute of the image tag the address of our image in the f older W e also give the image height and widt h of 100px here and an alt attribute to describe more about the image. Now let ’ s add ou r te xt : Now it ’ s time to create our style file. So , we create a new file named style .css in our f ol der and add it to the index.html file (between header tags) Now let ’ s see what we ’ ve got . We have a container div and inside t hat we have an image and te xt. Let ’ s see how it looks without any styling : As we see it ’ s not looking any good. So, let ’ s ju mp to the style.css file to add some styles and align them vertically As this is not a long text , we can use vertical - align property on the image and it will align the text and image vertically Before that let ’ s just add a 500px width to the container and make it center for styling purposes, so : W e used the margin: 0 auto which make s the container center, and also give it a 500px width. W e als o used the vertical - align : middle to align the text and image vertically, but make sure to use that propert y on the image , no t in the container or the te xt. Here ’ s the result: So far so goo d, right? But let ’ s extend ou r example by adding some more text to our span tag : A nd our result will be like : O h , it ’ s not that flexible, y ou agree ? We shou ld find a way to s ol v e this issue of hav ing more than just one line text and broking the text under the image ! Fle xbox will be ou r savio r here , so let ’ s change our code and use flexb ox this time: We use displa y: flex on the cont ainer div, as it is the parent for the image and text (it ’ s our flex container here), and align - items: center will m ake the children ( image and text ) vertic ally aligned center , but this time in a way m ore flexible than the previous meth od. We can add some other text to the span tag and check out the result. ( We can delete the vertical - align : midd le by the wa y) Before vie wing the result, we can add some margins so that the image and the text won ’ t be col lapsed so close together: Now let ’ s look at our result : As we see now it is perfectly verticall y aligned center within the magics of css flexbox. Recap: U sing vertic al - align: middle on circumstances that you have not muc h text beside th e image will be a good choice, but flexbox gives you more control and power to align image and text in a more flexible way, even with more than one line texts. I h ope you enjo y what we ’ ve learned together today

Signaler un abus

Détails PDF

Coordonnées

Intro.pdf

MehdiCh