Question

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中心放在一起，即使它应该在移动和桌面显示器上只有一条直线。我做错了什么？

Answer 1

添加text-align:center

section {
    background-color: #eeeeee;
    flex-flow: column wrap;
    margin: 10vmin 5vmin;
    padding: 2vmin;
    text-align: center;
}

Answer 2

您需要添加text-align

在您的css text-align:center部分

中设置section

代表

section
{
background-color: #EEEEEE;
margin: 10vmin 5vmin;
padding: 2vmin;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;  
text-align:center;
}

Answer 3

您的代码按原样运行，但在这3行前面有不可见/无效空格字符

display: flex;
justify-content: center;
align-items: center;

这是一个updated codepen，你已经拥有相同的代码，在那里我重写了这3行

这是一个Stack片段

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 R R 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不以我的形象为中心？

3 个答案: