CSS用于居中和剩余空间居中

卡斯珀托普

我当前的项目中有一个当前问题,我有一个要在其中居中放置一些文本的区域。该文本可能与该区域的每次使用都不同。

我已经完全理解了这一部分,但是我想在第一条文本的末尾与该区域的末尾之间的剩余空间的中心精确地放置另一条文本。

我将如何构造CSS和HTML来实现这一点?

下图应帮助显示我想做的事情:

发出适当的css以便为剩余房间居中和居中

html,
body {
  height: 100%;
  text-align: center;
}

#left {
  width: 200px;
  display: inline-block;
  background: #f00;
  height: 200px;
  justify-content: center;
}

#right {
  display: inline-block;
  background: #0f0;
  height: 200px;
}
<div id="left">
  CONTENT
</div>
<div id="right">
  Other content
</div>

编辑:很抱歉不包含代码我尝试了一次:http : //jsfiddle.net/5jRaY/298/

除了div应该包装容器之外,我得到了红色块以使其适合所需。我的问题是我无法获得绿色框来填充页面的剩余空间。

处理

您可以尝试其他布局。这就是我将要使用的:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#wrapper {
  display: table;
  width: 100%;
  text-align: center;
}

#one,
#two,
#three {
  display: table-cell;
  width: 33.333%;
}

#one {
  width: 200px;
  height: 200px;
  background: white; /*Change color to see it*/
}

#two {
  background: red;
  height: 200px;
}

#three {
  height: 200px;
  background: green;
}
<div id="wrapper">
  <div id="one"></div>
  <div id="two">CONTENT</div>
  <div id="three">Other content</div>
</div>

请让我知道这对你有没有用!

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章