insert content in center of box | SoloLearn: Learn to code for FREE!

+1

insert content in center of box

How do I insert "Milad" in the center of the box without using the margin properties? https://code.sololearn.com/WfxJ29foL2b8/?ref=app

7/12/2019 8:13:36 AM

milad miladi

7 Answers

New Answer

+5

Use this .box{ display: flex; } .box span{ margin: auto; }

+2

text-align: center; in the div. then use in the span: display: inline-block; padding: 25px; this uses no margin as your post requested

+2

ahh ok..thanks for the clarification. it sounded like you didnt want to use margin at all..which margin auto with flex uses so I skipped that method

+2

Another way to centering child element (the text) using flexbox .box{ display: flex; justify-content: center; align-items: center }

+1

or you can use grid by nesting. display:grid; justify-self: center; align-self: center; theres lots of ways and frameworks that make it easy..thats the beauty of web development you can decide how you want to do it

0

Jason Kennedy Thanks, but its not center exactly. I meant doing it directly and with a definite feature( like as text-align or center-crop), not with margin or padding and etc.

0

Calviղ & Jason Kennedy None of your second suggestions worked. But very thanks.