How to center a outer div without affecting the alignment of inner div in html css both horizontal and vertical of the page | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to center a outer div without affecting the alignment of inner div in html css both horizontal and vertical of the page

<div class="outer"> <div class="inner"> Code!!!!!!! </div></div>

26th May 2023, 2:16 AM
Sudalai Vignesh
4 Answers
+ 1
in HTML <div class="outer"> hey <div class="inner"> Code!!!!!!! </div> </div> in CSS .outer { text-align: center; } .inner { text-align: left; }
26th May 2023, 3:10 AM
SoloProg
SoloProg - avatar
+ 1
I need to center the div not the text
26th May 2023, 3:12 AM
Sudalai Vignesh
+ 1
Hope this helps you in CSS body { text-align: center; } .outer { margin: auto; width: 200px; border: 1px solid green; text-align: center; } .inner { margin: auto; width: 150px; border: 1px solid blue; text-align: left; }
26th May 2023, 3:30 AM
SoloProg
SoloProg - avatar
+ 1
Sudalai Vignesh control it with margins. an example is easier than trying to describe it: https://code.sololearn.com/W2f2ybicy3s8/?ref=app Try modiying the outer div margin to move it around the page. The layout does not blow up and the inner divs move with the outer div and maintaining their position relative to the outer div. Definitely better than absolute positioning.
26th May 2023, 4:14 AM
Bob_Li
Bob_Li - avatar