如何在屏幕尺寸更改期间将两个单独的居中单词保持在同一行？答案

【问题标题】：How do I keep two separate, centered words on the same line during screen-size change?如何在屏幕尺寸更改期间将两个单独的居中单词保持在同一行？
【发布时间】：2018-06-07 05:06:42
【问题描述】：

请注意，我不能在这里更改 HTML，只能更改 CSS。当屏幕变小时，我希望这两个词保持在同一行（至少只要两边都有空格），但是它们目前很容易崩溃，即使两边都有很多空格。

Codepen：https://codepen.io/anon/pen/BVzRbg

html {
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#link {
  position: absolute;
  margin-top: 5px;
  left: 45%;
  right: 45%;
}
#link a {
  margin-top: 5px;
  color: #fefefe;
  background-color: rgb(75, 101, 198, 1);
  /*line-height: 20px;*/
  padding: 10px 9px;
  text-decoration: none;
  text-shadow: 0 1px 0 #3c58c7;
  font-weight: 500;
}
#link a:hover {
  background-color: #354eb1
}
#one {
  border: 5px solid rgb(242, 168, 60, 1);
  padding: 5px;
  float: left;
  width: 25%;
  margin: 5px;
}
#two {
  border: 5px solid rgb(55, 124, 33, 1);
  padding: 5px;
  float: right;
  width: 25%;
  margin: 5px;
}
#three {
  border: 5px solid rgb(255, 253, 85, 1);
  padding: 5px;
  float: left;
  width: 25%;
  margin: 5px;
  position: fixed;
  bottom: 5px;
}
#four {
  border: 5px solid rgb(0, 34, 245, 1);
  padding: 5px;
  float: right;
  width: 25%;
  margin: 5px;
  position: fixed;
  bottom: 5px;
  right: 0px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Blocks</title>
  <!-- Do not change this file - add your CSS styling
       rules to the blocks.css file included below -->
  <link type="text/css" rel="stylesheet" href="blocks.css">
</head>
<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>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

您只需对 css 进行少量更改即可实现这一目标。将 id link 的样式更改为：

#link {
    position: absolute;
    margin-top: 5px;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
}

html {}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#link {
  position: absolute;
  margin-top: 5px;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}

#link a {
  margin-top: 5px;
  color: #fefefe;
  background-color: rgb(75, 101, 198, 1);
  /*line-height: 20px;*/
  padding: 10px 9px;
  text-decoration: none;
  text-shadow: 0 1px 0 #3c58c7;
  font-weight: 500;
}

#link a:hover {
  background-color: #354eb1
}

#one {
  border: 5px solid rgb(242, 168, 60, 1);
  padding: 5px;
  float: left;
  width: 25%;
  margin: 5px;
}

#two {
  border: 5px solid rgb(55, 124, 33, 1);
  padding: 5px;
  float: right;
  width: 25%;
  margin: 5px;
}

#three {
  border: 5px solid rgb(255, 253, 85, 1);
  padding: 5px;
  float: left;
  width: 25%;
  margin: 5px;
  position: fixed;
  bottom: 5px;
}

#four {
  border: 5px solid rgb(0, 34, 245, 1);
  padding: 5px;
  float: right;
  width: 25%;
  margin: 5px;
  position: fixed;
  bottom: 5px;
  right: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Blocks</title>
  <!-- Do not change this file - add your CSS styling
       rules to the blocks.css file included below -->
  <link type="text/css" rel="stylesheet" href="blocks.css">
</head>

<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>

</html>

【讨论】：

【解决方案2】：

使用 2 个 span 和 display: inline-block;或浮动：左；

【讨论】：

我忘了说，我不允许更改 HTML。我确实尝试让#link a{} 部分具有display: inline-block; 但它并没有改变行为。
在 CSS 中，尝试：white-space: nowrap;
这当然有帮助，谢谢！快速提问，我很好奇为什么当页面变小时右侧的空白比左侧少？我希望它保持在中间。我为它做了一个代码笔codepen.io/anon/pen/BVzRbg。

【解决方案3】：

将左右分配给绝对项而不在 P 上声明宽度会导致换行。

最好这样居中：

width: 150px; (or any other measurement you chose)    
left: 0;
right: 0;
margin: 5px auto;

我建议阅读这些关于居中的帖子：

【讨论】：

感谢您的链接建议。据我了解，我已尽力将您的答案合并到代码笔中（因为格式对我来说不是 100% 清楚，例如“替换此：#link{...”，但遇到了左侧空格较少的问题比右侧更小，当窗口变小时。使用您的答案时显示我的意思的代码笔在codepen.io/anon/pen/QxKyga。另一张海报添加了一个有效的答案，我接受了它作为正确的答案。