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

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<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 </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 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;
        }

跳转到最佳答案楼层

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

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

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

这个最佳答案由 kogawananari 给出，感谢 kogawananari 的回答。

单击隐藏图章

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; 绝对定位
流行一个说法叫【父相子绝】
意思是子元素是绝对定位父元素如果不是绝 ...

谢谢

账号		自动登录	找回密码
密码			立即注册