+ 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>
4 odpowiedzi
+ 1
in HTML
<div class="outer">
hey
<div class="inner">
Code!!!!!!!
</div>
</div>
in CSS
.outer {
text-align: center;
}
.inner {
text-align: left;
}
+ 1
I need to center the div not the text
+ 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;
}
+ 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.