Iki 发表于 2020-10-13 16:49:22

如何将文字artist-ting放在中间，在header里面如何不用空格就调整左右间隔？

<title>Document1 </title>
    <style>
      body{
            color:black;
            background: white;
            font-family: Arial, Helvetica, sans-serif;
            margin:0;
            padding:0;

      }
      header{
            background:gray;
            margin: 20px 40px 20px 50px;
            
         
      }
      section{
      
            background:lightpink;
            color:black;
            padding:20px;
            display:flex;
            flex-direction:row;
            height: 300px;
      }
      article{
            text-align: center;
            position: absolute;
            
            font-size:xx-large;
      }
      
      
      div{
            background:red;
            margin:auto;
         
            width:100px;
      }

      ul{
            margin:0;
            padding:0;
            list-style-type:none;
            
      }
      li{
            display:inline-block;
            margin:10px;
            width:auto;
            color:white;
      }
      .headcenter{
            text-align:center;
            m
            

      }
      footer{
            background:lightblue;
            height:40px;
      }
    </style>
</head>
<body>
   
    <h1>let`s start it</h1>
    <header>
      <nav>
            <ul>
                <li>Google Artists & Culture</li>
                <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
                <li>Home&nbsp;</li>
                <li>Explore</li>
                <li>Nearby</li>
                <li>Favorite</li>
                <li><img src="download.png" height=20px; width:10px;></li>
            </ul>
      </nav>
    </header>
    <section>
      <a class="headcenter"><article>Artist-Ting</article></a>
      <div>a</div>
      <div>b</div>
      <div>c</div>

    </section>
    <section>lower-section</section>
    <footer>footer</footer>
</body>
</html>

kogawananari 发表于 2020-10-13 17:02:19

header里面调整左右间隔用 最简单的方法是【弹性盒模型】 具体用法百度
文字左右居中用text-align:center;{:10_331:}

Iki 发表于 2020-10-13 18:12:07

kogawananari 发表于 2020-10-13 17:02
header里面调整左右间隔用 最简单的方法是【弹性盒模型】 具体用法百度
文字左右居中用text-align:center; ...

text-align我用了，但不知道为什么，并没有效果

kogawananari 发表于 2020-10-13 21:05:17

article没宽度 被文字撑开 再text-align也没啥用 可以这样：
      article{
            position: absolute;
            left:0;
            right:0;
            margin: auto;
            font-size:xx-large;
      }
或者 article给父元素的100%宽度
      article{
            text-align: center;
            position: absolute;
            width:100%;
            font-size:xx-large;
      }

Iki 发表于 2020-10-15 15:28:21

kogawananari 发表于 2020-10-13 21:05
article没宽度 被文字撑开 再text-align也没啥用 可以这样：

或者 article给父元素的100%宽度

谢谢，我能问一下是为什么吗？是不是相当于这个article是一个框，只要定义了和下一段文字的间隔就可以实现center？

kogawananari 发表于 2020-10-15 15:40:52

Iki 发表于 2020-10-15 15:28
谢谢，我能问一下是为什么吗？是不是相当于这个article是一个框，只要定义了和下一段文字的间隔就可以实 ...

position: absolute; 绝对定位
流行一个说法叫【父相子绝】
意思是子元素是绝对定位 父元素如果不是绝对定位或者固定定位的话你也得给它一个相对定位
这是为了设置参照

然后left和right分别是和设置了参照的父元素的左右边界的距离
左右都给0的情况下 这个元素试图和左右都贴在一起
正常情况下是做不到 所以设置margin auto 会自动加上外边距去贴住左右的边界 就被左右居中了

这个和文字无关 你的这个元素没设置宽度 塌陷到了和文字一样宽 所以文字居中属性也没用

Iki 发表于 2020-10-15 16:28:57

kogawananari 发表于 2020-10-15 15:40
position: absolute; 绝对定位
流行一个说法叫【父相子绝】
意思是子元素是绝对定位 父元素如果不是绝 ...

谢谢
页: [1]
查看完整版本: 如何将文字artist-ting放在中间，在header里面如何不用空格就调整左右间隔？