如何使用display = flex和flex-direction = row将div水平居中；
[英]How to horizontally center div with display = flex and flex-direction = row;
问题描述
I have a content div with display as flex and flex direction as row. 
我有一个内容div，其显示为flex，而flex的方向为row。 Within this div I have two other divs, one holding a form and the other holding 2 images also contained in divs. 在这个div中，我还有另外两个div，一个div包含一个表单，另一个div也包含2张图像。 I have set the second divs flex direction as column and am trying to center all the divs in the middle of the page. 我已经将第二个div的flex方向设置为列，并试图将所有div置于页面中间。 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. 注意=我现在通过将col2和col3的宽度从50％更改为59vh来修复它。 Not sure why it wasnt liking %. 不知道为什么不喜欢％。
1 个解决方案
解决方案1
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.