PROSAGA码农传奇-html/HTML5-媒体查询flexbox中的text-align

媒体查询flexbox中的text-align

作者: 喜欢一个人丶
发布时间: 2024-10-12 12:46:55 (1天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    删除h1上的内联样式这里是更新的代码。希望能帮助到你
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          /* Container for flexboxes */
header {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */

/* Style the side */
logosmall {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #FA8072;
  padding: 20px;
}
header h1{
font-size:15px; font-style:italic; color:#555; text-align: left;
}
header bannersmall h1{
  text-align:right;
}
/* Style the content */
bannersmall {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #FFA07A;
  padding: 10px;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

@media (max-width: 600px) {
  header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  header h1, header bannersmall h1{
  text-align:center;
  }
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <!DOCTYPE html>
<html lang="en">

<head>

<style>

</style>
</head>

<body>

<logosmall>
<h1>Text-align: left</h1>
</logosmall>

<bannersmall>
<h1>Text-align: right</h1>
</bannersmall>
</header>

</body>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>