+ 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

12th Jul 2019, 8:13 AM
milad miladi
milad miladi - avatar
7 Antworten
+ 5
Use this .box{ display: flex; } .box span{ margin: auto; }
12th Jul 2019, 9:48 AM
Calviղ
Calviղ - avatar
+ 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
12th Jul 2019, 8:52 AM
Jason Kennedy
+ 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
12th Jul 2019, 4:45 PM
Jason Kennedy
+ 2
Another way to centering child element (the text) using flexbox .box{ display: flex; justify-content: center; align-items: center }
13th Jul 2019, 2:56 AM
Calviղ
Calviղ - avatar
+ 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
13th Jul 2019, 4:34 AM
Jason Kennedy
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.
12th Jul 2019, 11:22 AM
milad miladi
milad miladi - avatar
0
Calviղ & Jason Kennedy None of your second suggestions worked. But very thanks.
13th Jul 2019, 3:53 PM
milad miladi
milad miladi - avatar