简体   繁体   English

如何使文本部分位于 w3-col 的中心?

[英]How to make the text section in the center of a w3-col?

using w3css, cannot make "Wish you a happy day" in the center of the sand-colored section yet.使用w3css,还不能在沙色部分的中心做出“Wish you a happy day”。

<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Trirong", serif}
</style>
</head>
<body class="w3-light-grey">

<!-- w3-content defines a container for fixed size centered content, 
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1100px">

<!-- Header -->
<header class="w3-container w3-center w3-padding-32"> 
  <p><button class="w3-button w3-padding-large w3-white w3-border">Welcome</button></p>
</header>

<!-- Grid -->
<div class="w3-row w3-card-4 w3-margin w3-sand">

  <!-- Blog entries -->
  <div class="w3-col l8 s12">
      <img src="../static/images/101.jpg" alt="Nature" style="width:100%">
  </div>


  <div class="w3-col l4">
        <div class="w3-container w3-sand">
        <div class="w3-container w3-sand w3-center" style="width:80%; margin:auto;">
          <p>
            <h7>WELCOME</h7>
            <h3><b>Wish you a happy day</b></h3>
            <h6>Keep calm and carry on !</h6>
          </p>
      </div>
      </div>
  </div>

<!-- END GRID -->
</div>
<br>

<!-- END w3-content -->
</div>


</body>
</html>

[![enter image description here][1]][1] [![在此处输入图像描述][1]][1]

Any suggestions ?有什么建议么 ?

ok i used w3-cell and we-cell-row, not w3-container, it's working now好的,我使用了 w3-cell 和 we-cell-row,而不是 w3-container,它现在可以工作了

see this sample https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_align_all请参阅此示例https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_align_all

我如何将 html “ul” 元素置于 bootstrap 4(水平 + 垂直)内部<section><div class="row"><div class="col-sm"></div><div id="text_translate"><p>如何将 html“ <strong>ul</strong> ”元素在 bootstrap4(水平 + 垂直)中居中,水平对齐“ <strong>li</strong> ” </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-html lang-html prettyprint-override"> &lt;section&gt; &lt;div class='row'&gt; &lt;div class='col-sm'&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt;/li&gt; &lt;li&gt;C&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt;</pre></div></div><p></p></div></div></section> - How I center html “ul” element in bootstrap 4 (horizontal + vertical) inside <section><div class='row'><div class='col-sm'>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在div w3-row / w3-col(W3CSS)上方显示画布 - Display canvas above div w3-row/w3-col (W3CSS) 使col中心Bootstraps - Make col center Bootstraps 如何在中间制作文字 - how to make text in the center 如何使col-md-6中的巨无霸置于两侧的中央? - How to make Jumbotron in col-md-6 placed in the center on both side? 如何使框在 `.flex-col` Tailwindcss 中居中对齐? - How to make box align center inside `.flex-col` Tailwindcss? col-md-4 中的居中文本 - Center text in col-md-4 如何在bootstrap col-md-1中正确居中旋转(90)文本 - How to properly center rotated(90) text in a bootstrap col-md-1 我如何将 html “ul” 元素置于 bootstrap 4(水平 + 垂直)内部<section><div class="row"><div class="col-sm"></div><div id="text_translate"><p>如何将 html“ <strong>ul</strong> ”元素在 bootstrap4(水平 + 垂直)中居中,水平对齐“ <strong>li</strong> ” </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-html lang-html prettyprint-override"> &lt;section&gt; &lt;div class='row'&gt; &lt;div class='col-sm'&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt;/li&gt; &lt;li&gt;C&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt;</pre></div></div><p></p></div></div></section> - How I center html “ul” element in bootstrap 4 (horizontal + vertical) inside <section><div class='row'><div class='col-sm'> 更改屏幕尺寸时如何将文本保留在html部分的中心? - How to keep text in center of the html section when changing the screen size? 如何在弹性显示模式下将文本居中显示在某个部分上方 - How do I center a text above a section in flex display mode
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM