为什么flexbox无法使我的图像居中？
[英]Why does flexbox not center my image?
问题描述
section
{
background-color: #EEEEEE;
margin: 10vmin 5vmin;
padding: 2vmin;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
}
img
{
height: 30vmax;
border: 1vmin solid black;
border-radius: 30vmax;
margin: 1vmin;
}
此处提供完整的源代码： https : //codepen.io/de_arth/pen/dvLoyO/
基本上，我可以使所有图像居中，但图像（以及最后一节中的链接）可以通过flexbox居中，即使它在移动和台式机显示器上应位于一条直线上。 我究竟做错了什么？
3 个解决方案
解决方案1
0 2017-07-05 06:43:57
添加text-align:center
section {
background-color: #eeeeee;
flex-flow: column wrap;
margin: 10vmin 5vmin;
padding: 2vmin;
text-align: center;
}
解决方案2
0 2017-07-05 06:50:23
您需要添加text-align
在CSS section设置text-align:center
例如：
section
{
background-color: #EEEEEE;
margin: 10vmin 5vmin;
padding: 2vmin;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
text-align:center;
}
解决方案3
0 已采纳 2017-07-05 07:34:03
尽管这三行前面有一个不可见/无效的空格字符，您的代码仍按原样工作
display: flex;
justify-content: center;
align-items: center;
这是一个更新的codepen，具有与您已经拥有的相同的代码，在这里我重写了这3行
这是一个堆栈片段
body { background-color: #FAFAFA; } section { background-color: #EEEEEE; margin: 10vmin 5vmin; padding: 2vmin; display: flex; justify-content: center; align-items: center; flex-flow: column wrap; } img { height: 30vmax; border: 1vmin solid black; border-radius: 30vmax; margin: 1vmin; } h1, h2 { margin: 2vmin; text-align: center; margin: 5vmin; } h1 { font-family: 'Roboto', sans-serif; font-size: 8vw; } h2 { font-family: 'Raleway', sans-serif; font-size: 3vw; font-style: italic; } h3 { font-family: 'Roboto', sans-serif; font-size: 4vw; text-align: center; margin-bottom: 4vw; } p { font-family: 'Raleway', sans-serif; font-size: 3vw; text-align: center; } a { font-family: 'Raleway', sans-serif; margin-top: 30vmin; text-align: center; } #awards > p { line-height: 7vw; } @media screen and (min-width: 40.5em) { section { height: 100vh; } h1 { font-size: 5vw; } h2 { font-size: 3vw; } h3 { font-size: 3vw; margin-top: 1vw; margin-bottom: 0; } p { font-size: 2vw; line-height: 2.5vw; margin: 0; } #awards > p { line-height: 4vw; } a { margin-top: 2vw; font-size: 3vw; } section:not(#intro) > h1 { margin: 1vw; } section:not(#intro) > div { margin: 1vw; } footer > p { margin-bottom: 1vw; } }
<head> <link href="https://fonts.googleapis.com/css?family=Raleway:300|Roboto" rel="stylesheet"> </head> <section id = "intro"> <img src = "https://assets.kennislink.nl/system/files/000/134/321/large/Richard_Feynman_Nobel.jpg?1494968180"> <div> <h1> Richard Feynman </h1> <h2> Physicist. Prankster. Genius. </h2> </div> </section> <section id = "early"> <h1> Early Life </h1> <div> <h3> 1918 </h3> <p> Born in Queens, New York. </p> <h3> 1933 </h3> <p> Teaches himself trigonometry, advanced algebra, infinite series, analytic geometry and calculus. </p> <h3> 1939 </h3> <p> Obtains his B.Sc from the Massachusetts Institute of Technology. </p> <h3> 1942 </h3> <p> Obtains his PhD from Princeton University. Marries Arline Greenbaum. </h3> </div> </section> <section id = "bomb"> <h1> Manhattan Project </h1> <div> <h3> 1942 </h3> <p> Recruited into the project by RR Wilson. </p> <h3> 1943 </h3> <p> Redloyed at Los Alamos Laboratory, in New Mexico and made group leader.</p> <h3> 1945 </h3> <p> First wife dies of Tuberculosis. Becomes the only person to see the explosion at the Trinity Nuclear Test without any protection. </p> </div> </section> <section id = "later"> <h1> Cornell </h1> <div> <h3> 1945 </h3> <p> Hired as Professor of Theoretical Physics at Cornell University. </p> <h3> 1946 </h3> <p> Feigns mental illness to avoid being drafted, and later suffers from depression as his father dies. Solves less practical problems due to lack of focus. </p> <h3> 1948 </h3> <p> Delivers his first presentation involving Feynman diagrams, and is met with many objections. </p> <h3> 1950 </h3> <p> Papers citing the Feynman diagrams soon become prevalent, as a tool of unprecedented power. </p> </div> </section> <section id = "caltech"> <h1> Caltech </h1> <div> <h3> 1952 </h3> <p> Appointed Professor of Theoretical Physics at California Institute of Technology. Marries Mary Louise Bell. </p> <h3> 1958 </h3> <p> A divorce is final after a stormy marriage, on the grounds of extreme cruelty. </p> <h3> 1960 </h3> <p> Marries Gweneth Howarth. Carl was born in 1962, and Michelle was adopted in 1968. </p> <h3> 1988 </h3> <p> Dies following kidney failure, after a decade long battle with cancer. </p> </div> </section> <section id = "awards"> <h1> Awards </h1> <p> Albert Einstein Award - 1954 <br> Ernest Orlando Lawrence Award - 1962 <br> The Nobel Prize in Physics - 1965 <br> Oersted Medal - 1972 <br> National Medal of Science - 1979 </p> <a href = "https://en.wikipedia.org/wiki/Richard_Feynman"> Read more on Wikipedia </a> </section> <footer> <p> Designed and compiled by Arvind S </p> </footer>
为什么flexbox不能像div中的其他元素那样使我的图像居中？
[英]Why won't flexbox center my image like the other elements within the div?
为什么我的 flexbox 仅在中心内容对齐时调整图像大小
[英]Why my flexbox resizing images only at center content justification
为什么 flexbox 会拉伸我的图像而不是保留纵横比？
[英]Why does flexbox stretch my image rather than retaining aspect ratio?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.