# Aligning objects (using flex-box)

**URL:** <https://community.hubspot.com/t/aligning-objects-using-flex-box/26924>\
**Category:** CMS Development\
**Tags:** website-pages\
**Created:** [October 19, 2020, 12:52pm UTC](https://community.hubspot.com/t/aligning-objects-using-flex-box/26924 "2020-10-19T12:52:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [October 19, 2020, 12:52pm UTC](https://community.hubspot.com/t/aligning-objects-using-flex-box/26924/1 "2020-10-19T12:52:41Z")

</div>

Hi!  
I’m trying to vertically align an image and a text-box, and I stumbled upon this post suggesting using flex-box:  
[https://community.hubspot.com/t5/CMS-Development/Vertically-Aligning-text-element-within-a-container/m-p/378210#M19087](https://community.hubspot.com/t5/CMS-Development/Vertically-Aligning-text-element-within-a-container/m-p/378210#M19087)

However, I can’t get it to work? Am I putting the codes in the wrong places as nothing has changed? I first put the codes directly into the modules’ inline styling in design tools, after which I gave them classes (.kuva-boxi (the wrapper) / .kuva-boxi-kuva (the pic) / .kuva-boxi-teksti (the text)) and added the codes into the main css.

It’s the ‘KEINO-SOVELLUKSEN EDUT’ row if you want to inspect 🙂

[https://www.prometheusone.io/home-keino-0?hs\_preview=qOglKNzO-35998890977](https://www.prometheusone.io/home-keino-0?hs_preview=qOglKNzO-35998890977)

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [October 20, 2020, 6:16pm UTC](https://community.hubspot.com/t/aligning-objects-using-flex-box/26924/2 "2020-10-20T18:16:33Z")

</div>

Hello [@tette\_engage](https://community.hubspot.com/t5/user/viewprofilepage/user-id/70145) !

Thanks for posting the question! Just to confirm, you want to top align the image and the text? So the top of the phone would match the position of the text? Any visual aid you have would help! Flexbox is definitely the way I would go about this. I did not see the **flex** property being applied to the container of the two columns, though. I see it a couple divs up. (See attached screengrab from inspector)

[@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866) , @SandyG1 , @alyssamwilie -- what do you all think 🙂

(ps Firefox Developer Edition for the win with its highlighting of flex or grid content!)

 ![33298i7B4BBAC2CB133666.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/7/e7f302b08f64be7c411d1ad219e99bb9da5609dd.png)

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [October 21, 2020, 1:56am UTC](https://community.hubspot.com/t/aligning-objects-using-flex-box/26924/3 "2020-10-21T01:56:37Z")

</div>

Yep, it’s just the styling being in the wrong place. [@tette\_engage](https://community.hubspot.com/t5/user/viewprofilepage/user-id/70145) I would remove the .kuva-boxi-kuva and .kuva-boxi-teksti wrappers so that the hubspot widget-spans are whats getting aligned. Then move your flex css into .kuva-boxi \> .row-fluid-wrapper \> .row-fluid.

 ![33320iD80E0245ADAB80BF.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/6/7614918fd66c0d2b57694ebdacb2ef96894d5972.jpeg)

 ![33321iF8C3732CDAA4FEDA.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/1/b14f86b58a182da406996229f1d6638a5c5740a5.png)

---

<div class="post-metadata">

**Author:** ![tette\_engage](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tette_engage/32/92090_2.png) [@tette\_engage](https://community.hubspot.com/u/tette_engage)\
**Post date:** [October 21, 2020, 7:17am UTC](https://community.hubspot.com/t/aligning-objects-using-flex-box/26924/4 "2020-10-21T07:17:29Z")

</div>

THANK YOU, THANK YOU, THANK YOU! That did the trick 🙂 Also, I can apparently leave the css-class to the text to for e.g. mobile styling, if someone else is wondering 🙂