I am passing a Component with different text present in an array using map() but it is giving me this output.
I want all to be in a straight line having same height of each component without depending on content. How do I fix this?
4
- Please provide a minimal reproducible example.kiner_shah– kiner_shah2021-11-29 12:39:28 +00:00Commented Nov 29, 2021 at 12:39
- probably needs vertical-align settingPete– Pete2021-11-29 12:47:17 +00:00Commented Nov 29, 2021 at 12:47
- it is really difficult to answer if you don't provide what you tried to get this output. i guess the height looks same for boxes from diagram.. so what you can do is to parent you should assign display to flex and align items property to center so all boxes will be in straight line. also set the minimum or max height to boxes so they will be sameGunal Bondre– Gunal Bondre2021-11-29 12:55:06 +00:00Commented Nov 29, 2021 at 12:55
- I have provided the sand box link. I want the in a straight line, having same height.Ayush Rai– Ayush Rai2021-11-29 12:56:49 +00:00Commented Nov 29, 2021 at 12:56
Add a comment |
1 Answer
Just add a verticalAlign: "middle" to your Box style.
However, I would recommend using Flexbox with justify-content and/or align-items.
Edit: Simple example with flexbox:
html, * { box-sizing: border-box; } .row { display: flex; justify-content: center; align-items: center; width: 100%; height: 6rem; padding: 1em; } .box { width: 8rem; height: 100%; margin: 0.75rem; padding: 0.75%; text-align: center; border-radius: 4px; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12); }<div class="row"> <div class="box">Multiple Words to continue</div> <div class="box">words</div> <div class="box">Multiple Words to continue</div> <div class="box">words</div> <div>
