How to horizontally center div with display = flex and flex-direction = row;
Question
I have a content div with display as flex and flex direction as row. Within this div I have two other divs, one holding a form and the other holding 2 images also contained in divs. I have set the second divs flex direction as column and am trying to center all the divs in the middle of the page. I am sorry if I have explained it badly but hopefully the following code will make sense of this!
#content { display: flex; flex-direction: row; justify-content: center; } #col1 { width: 60%; border-radius: 5px; } #col2 { background: rgba(150, 143, 150, 0); width: 50%; height: auto; border-radius: 5px; } #col3 { background: rgba(150, 143, 150, 0); width: 50%; height: auto; }
<div id='content'> <div id='col1'> My form is here </div> <div style="flex-direction:column"> <div id='col2'> <img id='side1' src='https://via.placeholder.com/120'> </div> <div id='col3'> <img id='side2' src='https://via.placeholder.com/120'> </div> </div> </div>
Thanks in advance for any help
NOTE = I have now fixed it by changing the = width of col2 and col3 from 50% to 59vh. Not sure why it wasnt liking %.
1 answers
solution1
0 2019-01-02 10:39:17
you must use this code
#content{ background-color: #d2cbd2; /* for example */ width: 100%; height: auto; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } #col2{ display: flex; flex-flow:wrap row; }
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id='content'> <div id="col1"> My form is here </div> <div id="col2"> <div> <img src="i2.jpg"> </div> <div> <img src="i2.jpg"> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.