时间戳

首页 > 解决方案 > CSS没有正确居中

html - CSS没有正确居中

问题描述

我在尝试将我的 div class= 内容居中放在自由一词下方的中间时遇到了一些麻烦。有什么帮助吗？我还在这里提供了一张图片https://gyazo.com/8a38955c74369034a014b20ed8e5d31d

HTML

    <p id="einz" style="color: rgb(255, 255, 255);">
    <!--marquee direction="right" speed="1" onmouseover="this.stop();" onmouseout="this.start();"-->
    [ <a id="einz" href="bla bla bla" target="blank" rel=noopener>discord</a> / 
    <a id="einz" href="bla bla bla" target="blank" rel=noopener>steam</a> /
    <a id="einz" href="bla bla bla" target="blank" rel=noopener>youtube</a> /
    <a id="einz" href="bla bla bla" target="blank" rel=noopener>github</a> ] 

CSS
```#einz
{
  
  text-align: center;
  font-weight: normal;
  font-family: 'Courier', sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,100), 1px 1px 1px rgba(0,0,0,100);
  margin: 0 auto;
  z-index: 1;
  font-size: 12px;
}

标签： htmlcss

解决方案

在您的 CodePen 演示之后，您必须将自由文本和链接放在包装器中，然后将包装器居中以保持文本和链接的相关性。此外，由于您想要自由文本右下角的链接，因此链接也必须放在包装器中。由于您想要两个不同级别的链接，我建议使用块来强制换行而不是<br>. style当元素具有可以更改的类时，您还应该避免使用该属性。您也不应该id多次使用类似的属性，而应该参考使用类。

/* temporary code to not blind the view */
body { background: pink }

#freedom-wrapper {
  position: absolute;
  
  top: 50%;
  left: 50%;
  
  margin-top: -50px;
  margin-left: -220px;
}

#freedom-links-wrapper {
  float: right;
}

.freedom-links {
  color: rgb(255, 255, 255);
  
    font-weight: normal;
    font-size: 12px;
    font-family: 'Courier', sans-serif;
    
    text-align: center;
  text-shadow:  1px 1px 1px rgba(0,0,0,100),
                1px 1px 1px rgba(0,0,0,100);
  
  line-height: 18px;
  
    z-index: 1;
}

.glitch {
  color: white;
  
  font-size: 100px;
  
  z-index: 1;
}

/* old code */

@keyframes noise-anim {
0% {
clip-path: inset(87% 0 4% 0);
}
5% {
clip-path: inset(3% 0 43% 0);
}
10% {
clip-path: inset(82% 0 4% 0);
}
15% {
clip-path: inset(41% 0 2% 0);
}
20% {
clip-path: inset(96% 0 5% 0);
}
25% {
clip-path: inset(57% 0 35% 0);
}
30% {
clip-path: inset(78% 0 4% 0);
}
35% {
clip-path: inset(100% 0 1% 0);
}
40% {
clip-path: inset(99% 0 1% 0);
}
45% {
clip-path: inset(46% 0 49% 0);
}
50% {
clip-path: inset(16% 0 8% 0);
}
55% {
clip-path: inset(16% 0 72% 0);
}
60% {
clip-path: inset(19% 0 80% 0);
}
65% {
clip-path: inset(8% 0 9% 0);
}
70% {
clip-path: inset(88% 0 6% 0);
}
75% {
clip-path: inset(32% 0 30% 0);
}
80% {
clip-path: inset(46% 0 47% 0);
}
85% {
clip-path: inset(78% 0 21% 0);
}
90% {
clip-path: inset(60% 0 9% 0);
}
95% {
clip-path: inset(48% 0 49% 0);
}
100% {
clip-path: inset(23% 0 64% 0);
}
}
.glitch::after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
overflow: hidden;
animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
0% {
clip-path: inset(19% 0 72% 0);
}
5% {
clip-path: inset(6% 0 35% 0);
}
10% {
clip-path: inset(32% 0 35% 0);
}
15% {
clip-path: inset(97% 0 3% 0);
}
20% {
clip-path: inset(19% 0 57% 0);
}
25% {
clip-path: inset(85% 0 16% 0);
}
30% {
clip-path: inset(46% 0 46% 0);
}
35% {
clip-path: inset(83% 0 15% 0);
}
40% {
clip-path: inset(66% 0 18% 0);
}
45% {
clip-path: inset(90% 0 8% 0);
}
50% {
clip-path: inset(58% 0 34% 0);
}
55% {
clip-path: inset(38% 0 61% 0);
}
60% {
clip-path: inset(93% 0 6% 0);
}
65% {
clip-path: inset(4% 0 83% 0);
}
70% {
clip-path: inset(57% 0 38% 0);
}
75% {
clip-path: inset(97% 0 4% 0);
}
80% {
clip-path: inset(9% 0 57% 0);
}
85% {
clip-path: inset(7% 0 82% 0);
}
90% {
clip-path: inset(14% 0 54% 0);
}
95% {
clip-path: inset(94% 0 6% 0);
}
100% {
clip-path: inset(9% 0 49% 0);
}
}
.glitch::before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: palevioletred;
overflow: hidden;
animation: noise-anim-2 15s infinite linear alternate-reverse;

}
<div id="freedom-wrapper">
  <div class="glitch" data-text="freedom">freedom</div>
  
  <div id="freedom-links-wrapper">
    <div class="freedom-links">
      [
      <a href="stuff" target="_blank">discord</a>
      /
      <a href="bla bla bla" target="_blank">steam</a>
      /
      <a href="http://ybla bla bla" target="_blank">youtube</a>
      /
      <a href="https://github.cbla bla bla" target="_blank">github</a>
      ]
    </div>

    <div class="freedom-links">
      [ <a class="toggle">ᴄʟɪᴄᴋ ᴍᴇ</a> ]    
    </div>
  </div>
</div>

target="blank"也是无效的，应该是target="_blank"。另请注意，您可以参考在元素上使用:after伪元素<a>以在元素不是其子元素 ( :not(:last-child):after) 中的最后一个时添加斜线。

最后一点，不要使用纯文本“字体”，而是使用实际字体。谈到click me文字。您也不应该相信您的预定义像素偏移量的自由余量。

推荐阅读