相关疑难解决方法(0)
以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; …推荐指数
解决办法
查看次数
元素不会保持居中,特别是在重新调整屏幕大小时
我的问题是我不能水平居中三角形指针.
好吧,我可以将指针放在一些窗口大小的中心,但是当我收缩或扩展窗口时,它会再将它放在错误的位置.
我错过了什么？
body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container:before {
top: -33px;
left: 48%;
transform: rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '';
width: 56px;
height: 56px;
}<div class="container container-decor">great distance</div>推荐指数
解决办法
查看次数
使用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>推荐指数
解决办法
查看次数
如何在Safari中将Flex容器中绝对定位的子项居中？
我有一个包含图像和一些文本的容器.我希望文本在图像的中间垂直和水平居中.
似乎最简单,前瞻性的方法是使用Flexbox和文本的绝对定位:
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}<div class='container'>
<div class='text'>
This should be centered
</div>
<img src="https://placehold.it/250x250" />
</div>文本以两个轴为中心.这似乎适用于所有现代浏览器......除了Safari.
Safari似乎根本不是文本的中心.它只是坐在容器的顶部/左侧,就像一个普通的绝对定位元素将处于非flexbox布局中.
Safari(错误):
所有其他浏览器(正确):
我认为Flexbox已经为黄金时段做好了准备,但考虑到有多少人在iOS上使用Safari,这似乎是一个交易破坏者.水平和垂直居中内容是Flexbox应该擅长的.
我唯一真正的替代方案是不使用Flexbox然后使用:
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
但我更倾向于出于渐进的原因使用Flexbox.
这里有什么我想念的吗？尽管我讨厌要求它,但这里有一些仅限Safari的解决方案吗？除了"不使用flexbox"之外,还有任何解决方案,因为如果这是2017年中期的答案,那将是令人失望的.
JSFiddle供参考:https://jsfiddle.net/z7kh5Laz/4/
推荐指数
解决办法
查看次数
在不知道尺寸的情况下,水平和垂直居中绝对定位元素
我甚至不知道这是否可以使用CSS,但我不得不问.
请相应地在提供答案之前阅读规范.谢谢!
我的加价:
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
显然,.wrapper将具有我的img元素的高度,如果这是一个块.然后,我需要p元素在包装器内水平和垂直居中.我没有p元素的固定宽度或高度.
因此,无论段落大小甚至图像大小,都应该垂直和水平对齐,如http://i.imgur.com/phiR48H.png或http://i.imgur.com/Xvdt42j.png所示.
如果我在段落上设置绝对位置,它将不会垂直对齐,因为如果我不知道段落高度,我不能设置负边距.我在想桌子和桌子(vertical-align:middle;),但我只有1个单元格.有什么想法吗？
添加小提琴:http://jsfiddle.net/f3x7977z/
所提供的解决方案具有向后兼容性非常重要,特别是在IE8 +中.
为了最终结果,我们欢迎任何关于额外包装的建议!
推荐指数
解决办法
查看次数
CSS 网格中的重叠图像
我需要两张图片在 CSS 网格布局中重叠而不作弊，并且必须使用 CSS 网格来完成。意味着它应该留在布局单元中。这是我正在做的事情：
“中间”应该在图片中居中，并且都在页面上居中，分别是“横幅”单元格
以下 CSS 布局应该保持不变：
.container {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-gap: 2px;
grid-template-areas:
'banner banner banner'
'sidebar content fb'
'sidebar content fb'
'sidebar content fb'
'src src src';
}
.banner {
grid-area: banner;
}
我已经尝试过这些方法：
justify-items: center;
justify-content: center;
align-content: center;
align-self: center;
text-align: center;
使用绝对位置的方法效果很好，但它完全忽略了网格，因此实际网格位于图片下方。可以对“横幅”单元格应用填充以向下推内容，但这是我想要避免的那种作弊。
我需要这 2 张图片在这个“横幅”单元格中保持重叠，但是由于 CSS 网格很新，我的选项用完了，而且没有很多答案。
HTML：
<body class="body">
<div class="container">
<div class="banner">
<img id="skyline" src="Pictures/SkylinePH.jpg">
<img id="logo" src="Pictures/Logo2.png">
</div>
</div>
我非常感谢任何帮助！先感谢您 …
推荐指数
解决办法
查看次数