Question

我如何将＆＃34; Brainy Quote＆＃34;在页面的顶部中心。这是一个目前看起来像的打印屏幕。

以下是我试图让它看起来的样子。

当我尝试使用文本对齐中心时，会导致整行变为蓝色。

＆＃13;

#link {
  left: 50%;
  right: 50%;
  background-color: blue;
  color: white;
  display: inline-block;
}

a {
  text-decoration: none;
}

a:visited {
  color: white;
}

＆＃13;

<body>
  <div id="one">
    Turns out you have a really fun time if you go to work every day and focus on being silly and funny and happy! - Hannah Murray
  </div>
  <div id="two">
    All you need in this life is ignorance and confidence, and then success is sure. - Mark Twain
  </div>
  <div id="three">
    Well, if crime fighters fight crime and fire fighters fight fire, what do freedom fighters fight? They never mention that part to us, do they? - George Carlin
  </div>
  <div id="four">
    Great minds discuss ideas; average minds discuss events; small minds discuss people. - Eleanor Roosevelt
  </div>
  <p id="link">
    <a href="https://www.brainyquote.com/" target="_blank">
    Brainy Quote
    </a>
  </p>
</body>

＆＃13;

Answer 1

对于你的绝对元素，你可以这样做：

.thing-to-center {
  position: absolute; 
  top: 50%; left: 50%; 
  transform: translate(-50%, -50%); 
}

Answer 2

试试这个代码段。我添加了一个额外的div标签并对齐了内容中心。同样在链接ID中，position是绝对的。

与给定的图片相比，其他4个框中缺少一些css细节。

#link {
  top: 0;
  position: absolute;
  margin: 0;
  background-color: blue;
}

a {
  text-decoration: none;
  color: BLACK;
  text-align: center;
}

a:visited {
  color: white;
}

#contain {
  display: flex;
  justify-content: center;
}

<body>
  <div id="one">
    Turns out you have a really fun time if you go to work every day and focus on being silly and funny and happy! - Hannah Murray
  </div>
  <div id="two">
    All you need in this life is ignorance and confidence, and then success is sure. - Mark Twain
  </div>
  <div id="three">
    Well, if crime fighters fight crime and fire fighters fight fire, what do freedom fighters fight? They never mention that part to us, do they? - George Carlin
  </div>
  <div id="four">
    Great minds discuss ideas; average minds discuss events; small minds discuss people. - Eleanor Roosevelt
  </div>

  <div id="contain">
    <p id="link">
      <a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
    </p>
  </div>
</body>

Answer 3

left和right属性仅适用于relative和absolute个定位元素。将position:relative;添加到您的#link

＆＃13;

#link {
  position: relative; /* Or `absolute` */
  left: 50%;
  right: 50%;
  background-color: blue;
  color: white;
  display: inline-block;
}

a {
  text-decoration: none;
}

a:visited {
  color: white;
}

＆＃13;

<body>
  <div id="one">
    Turns out you have a really fun time if you go to work every day and focus on being silly and funny and happy! - Hannah Murray
  </div>
  <div id="two">
    All you need in this life is ignorance and confidence, and then success is sure. - Mark Twain
  </div>
  <div id="three">
    Well, if crime fighters fight crime and fire fighters fight fire, what do freedom fighters fight? They never mention that part to us, do they? - George Carlin
  </div>
  <div id="four">
    Great minds discuss ideas; average minds discuss events; small minds discuss people. - Eleanor Roosevelt
  </div>
  <p id="link">
    <a href="https://www.brainyquote.com/" target="_blank">
    Brainy Quote
    </a>
  </p>
</body>

＆＃13;

Answer 4

我假设，您已使用块作为引号，并给出了“固定”位置。现在您必须设置链接，使用此

#link {
    text-align: center;
}

它将链接设置为顶部居中

显示短块内联中心

4 个答案: