Question

是否可以使用calc（）将元素居中，该元素的宽度定义为％？

e.g。

.wrapper {
  width: 100%;
  background-color: black;
  height: 300px;
  position: absolute;
  top: 0;
}
.inside {
  width: 100%;
  margin-left: 30px;
  background-color: yellow;
  height: 250px;
  margin: 20px;
}
.inside h1 {
  width: 30%;
  background-color: white;
  text-align: center;
}
.inside h1 {
  position: absolute;
  left: calc(50% - 15%);
  left: -webkit-calc(50% - 15%);
}

<div class="wrapper">
  <div class="inside">
    <h1>CENTERED to viewport</h1>
  </div>
</div>

这是滑块。它有一个“字符串”，引导滑块的步骤，标题始终位于屏幕的中间。但是出于设计目的，线条向右开始，向左边稍微结束，宽度为80％。顶部是带有字符串的第1个滑块，第二个是同步的滑块，是带有大白色方块的区域。

也许现在它更清楚了，为什么我尝试了我尝试的东西。

Answer 1

是的，如果你在css中创建一个变量，例如：

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
    --Example: 200px;
    position: absolute;
    left: 50px;
    width: calc(100% - var(--Example)/2);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
</style>
</head>
<body>

<div id="div1">Some text...</div>

</body>
</html>

Answer 2

如果您可以使用固定宽度，只需添加margin: 0px auto即可。这将使文本水平居中。

＆＃13;

.wrapper {
  width: 100%;
  background-color: black;
  height: 300px;
  position: absolute;
  top: 0;
}
.inside {
  margin-left: 30px;
  background-color: yellow;
  height: 250px;
  margin: 20px;
}
.inside h1 {
  width: 40%;
  background-color: white;
  text-align: center;
  margin: 0px auto;
}

＆＃13;

<div class="wrapper">
  <div class="inside">
    <h1>CENTERED to viewport</h1>
  </div>
</div>

＆＃13;

在repsonsive width到center元素上使用calc（）

2 个答案: