相关疑难解决方法(0)
如何使用CSS水平居中绝对div？
我有一个div,希望它能够水平居中 - 虽然我给它margin:0 auto;它没有居中......
.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}
推荐指数
解决办法
查看次数
以CSS网格为中心
我正在尝试使用CSS Grid创建一个简单的页面.
我没有做的是将文本从HTML中心放到相应的网格单元格中.
我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg
我该怎么做呢？
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}
.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}
.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center; …推荐指数
解决办法
查看次数
为什么"left:50%,transform:translateX(-50%)"水平居中一个元素？
我最近重构了我的一些CSS,并且惊喜地发现了一种更简单的方法来水平对齐我绝对定位的元素:
.prompt-panel {
left: 50%;
transform: translateX(-50%);
}
这很棒!即使我元素的宽度是自动的.但是,我不明白是什么让它真正发挥作用.我的假设是,translateX只是一种现代的,更高效的移动元素的方法,但事实并非如此.
这两个值不应该相互抵消吗？此外,为什么呢
.prompt-panel {
left: -50%;
transform: translateX(50%);
}
没有显示与第一个代码段相同的结果？
推荐指数
解决办法
查看次数
在flexbox中的图像上居中文本
如何将文本居中对齐<img>优选使用FlexBox？
body {
margin: 0px;
}
.height-100vh {
height: 100vh;
}
.center-aligned {
display: box;
display: flex;
box-align: center;
align-items: center;
box-pack: center;
justify-content: center;
}
.background-image {
position: relative;
}
.text {
position: absolute;
}<section class="height-100vh center-aligned">
<img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" />
<div class="text">SOME TEXT</div>
</section>推荐指数
解决办法
查看次数
仅使用 CSS 的复杂比例三元进度条设计
我制作了一个自定义进度条，由三个单独的部分组成（一个独特的可定制中心部分、一个左侧部分和一个右侧部分），但我很难在所有阶段正确对齐中心块。
首先，我将使用三个图形布局显示所需的最终状态，然后我将描述当前的问题，最后我将提供我当前的解决方法 hack，这是有问题的，需要某种修复。
三个期望
状态：显示1%左对齐的起始状态的期望结果：
中间块完美位于中间的中途状态的预期结果50%：
中心块完全停在100%右对齐的所需最终状态：
body{margin: 100px; background: #CCC}
.fullbar{
background-color: blue;
width: 100%;
}
.progress{
background: green;
margin: 10px 0 0 0;
text-align: right;
padding: 0 0px 1px 0px;
line-height: 5px;
}
.number{
background: inherit;
color: #FFF;
padding: 4px;
padding: 0 2px 1px 3px;
}<div class="fullbar">
<div class="progress" style="width:50%">
<div class="number">50%</div>
</div>
</div>问题
当状态为 50% 时，中心块应该在中间完美地水平对齐。然而事实并非如此。行尾居中，而不是包含实际数字“50%”的 div。
附注。出于未知原因，中心块的主体未在代码视图中正确呈现。也许我大量的 css 重置使我的进度条看起来与这里的裸代码不同。但它关于类名的 divnumber需要正确居中，目前还没有。
我哈克解决方案，工作不正常和不优雅
我试图用包裹的中心部分width:112%作为一个黑客以进度条，得到中央嵌段完美中间，就像这样： …
推荐指数
解决办法
查看次数
使用flexbox将文字居中
我想在悬停图像上添加居中文本。
这就是我所拥有的。
我尝试使用强制向上移动文本margin-top，但是页面调整大小后的结果不一致。
有什么想法可以使此文本居中吗？
.featuredText {
position: absolute;
-webkit-box-flex: auto;
-ms-flex: auto;
flex: auto;
text-align: center;
}<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt>
<div class="centeredText">text</div>
</div>推荐指数
解决办法
查看次数
使用“位置：粘性”保持元素始终在屏幕上
我有一个已知高度的容器（高度有时比屏幕长）。
这个容器有一个垂直和水平居中的元素（via flex）。
我希望这个元素总是在屏幕上垂直居中在容器可见部分的块中。
我试过的：
position:sticky; top:50%- 然而，这只会让它在容器的下半部分居中。position:sticky; bottom:50%- 然而这只会让它以上半部分为中心position:sticky; top: 50%; bottom:50%;- 它似乎top覆盖bottom所以这就像我第一次尝试top:50%只- 我尝试设置负值但没有用
这是一个演示：
.container {
height: 1200px;
background-color: rgba(0, 0, 0, .7);
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.center-piece {
background-color: green;
position: sticky;
top: 50%;
}
.center-piece2 {
background-color: steelblue;
position: sticky;
bottom: 50%;
}<div class="container">
<div class="center-piece">
#1
</div>
<div class="center-piece2">
#2
</div>
</div>无论如何要保持它完全居中，同时“始终在屏幕上”，在容器的可见部分，顶部和底部？
这是我的应用程序的截屏视频：https : //www.youtube.com/watch?v=CwYaBgolNHU …
推荐指数
解决办法
查看次数
如何将中间项目放在弹性行的中心？
结果是我想要什么：
我在一个容器中有三个元素，display: flex我希望左侧的项目与左侧对齐，右侧的项目与右侧对齐。中心项目在中心对齐。
space-between是不是修复。这不是我要找的解决方案。这是因为元素的宽度不同。即使宽度不同，我仍然希望中间元素居中。
这可以用包装纸固定。然后flex: 1在包装纸上放一个，然后在这些包装纸内放元素本身。同样，这不是我要寻找的解决方案。我无法使用包装器。
.parentContainer {
display: flex;
justify-content: center;
align-items: center;
}
.parentContainer > *{
background: red;
text-align: center;
}<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>推荐指数
解决办法
查看次数
使用flexbox垂直对齐绝对定位的元素
我有一个绝对定位的div.
我正试图将它与flex垂直对齐:
.container{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
....
HTML:
<div class="container">
<div>
<p>hello</p>
<p>to</p>
<p>you</p>
...
这可能吗？我怎么能垂直对齐.container？请注意,我不想使用拉伸方法.
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
margin: auto;
容器也可以是任何高度.
ps没有桌子.
推荐指数
解决办法
查看次数
翻译X覆盖翻译Y
我正在尝试创建不同的类来进行对齐。
我希望能够像class="left bottom"使用该transform:translate属性一样将其组合起来。
问题在于该属性正在被彼此覆盖。
如果您查看我的小提琴并打开调试器，您会发现它translateX(50%)已被translateY(25%). 它们不应该像这样组合起来吗translate(50%,25%)？
.container {
background: gray;
height: 100px;
width: 100%;
}
.left {
transform: translateX(50%);
}
.bottom {
transform: translateY(25%);
}<div class="container">
<div class="left bottom">
I should be aligned
</div>
</div>推荐指数
解决办法
查看次数