gpt4 book ai didi

css - 在中心元素的响应宽度上使用 calc()

转载 作者:行者123 更新时间:2023-12-05 02:20:29 25 4
gpt4 key购买 nike

是否可以使用 calc() 使元素居中,元素的宽度用 % 定义?

例如

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

slider

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

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

最佳答案

是的,如果您在 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>

关于css - 在中心元素的响应宽度上使用 calc(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39269874/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com