相关疑难解决方法(0)
Flexbox:水平和垂直居中
如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它们是水平居中的.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>推荐指数
解决办法
查看次数
CSS Grid中的justify-self,justify-items和justify-content之间的区别
我真的很困惑.在查找在线资源和文档时,这些属性的大多数文档似乎都引用了Flex-box,而不是grid.我不知道Flex-box中等效属性的文档对网格的适用性如何.
所以,我尝试引用https://css-tricks.com/snippets/css/complete-guide-grid/,它定义如下:
justify-items - 沿着行轴对齐网格项内的内容
justify-content - 此属性沿着行轴对齐网格
justify-self - 沿着行轴对齐网格项内的内容
但我仍然不明白它们之间的区别是什么.所以,我有3个问题要澄清.
- 是
justify-items在Flex的框属性相同justify-items的网格属性？或者它们有什么不同？(换句话说,我可以重用Grid的Flex-box文档) - (证明 - )内容,自我和项目有什么作用？
- 如何(证明 - )内容,自我和项目有何不同？
任何澄清将不胜感激.
编辑:由于每个人都不断给我Flex-box资源,我问的是css-grid,而不是flex-box.
推荐指数
解决办法
查看次数
在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网格时如何在CSS中垂直对齐对象？
我最近遇到过这个问题.让我们假设我有一个简单的<h1>标签,我想垂直居中,所以即使我重新调整窗口大小,它仍将保留在我的一个网格框行的中间,忽略它的水平位置.
我知道,当谈到网格容器时,vertical-align没有任何效果.那么解决方案是什么？
这个问题已被标记为重复,但是,另一个问题是关于水平居中文本,而在这里,我问的是垂直居中.
推荐指数
解决办法
查看次数
元素不会保持居中,特别是在重新调整屏幕大小时
我的问题是我不能水平居中三角形指针.
好吧,我可以将指针放在一些窗口大小的中心,但是当我收缩或扩展窗口时,它会再将它放在错误的位置.
我错过了什么？
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>推荐指数
解决办法
查看次数
我可以在CSS网格中每行使用不同数量的列吗？
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-auto-rows: 60px;
grid-gap: 15px;
}
.col {
background-color: tomato;
}<div class="grid">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>这将创建2行,第一行是100px高度,第二行是使用60px高度自动创建的.第二行中的2列具有1fr宽度.
这是否可以通过CSS Grid/Flexbox在第2行中水平居中2列？即每行有不同数量的列.
我试图在浏览器中为CSS Grid框架解决一个简单的用例.如果您使用Flexbox构建网格,这是非常有问题的.
但是我可以用CSS Grid实现吗？
这是我想要实现的CodePen演示.
推荐指数
解决办法
查看次数
在主容器中定位网格项的内容(子网格功能)
关于CSS网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.
<div class="wrapper">
<div>A</div>
<div>B</div>
</div>
凡.wrapper具有display: grid和网格属性的定义.
如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级？),这是否有意义？
<div class="wrapper">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>
在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗？
推荐指数
解决办法
查看次数
将CSS应用于HTML5自定义元素的正确方法
我有一个名为的自定义HTML5标记<scroll-content>.实际上,我的HTML文件中的某些位置的框架会为我创建并插入此标记.现在我想修改这个标签的CSS,所以在我的CSS文件中我去了:
scroll-content{
overflow: hidden;
}
它做了它应该做的,但这是设计自定义标签的正确方法吗？
我不能为它们添加一个类,因为我没有创建标签,框架没有,所以我无法在我的代码中访问它们,我想避免使用Javascript来查找这些标签并以这种方式添加类.
我更愿意了解修改自定义标签的标准/最安全的方法.
推荐指数
解决办法
查看次数
CSS-Grid：如何在不缩小项目本身的情况下使内容居中？
使用CSS-Grid，我尝试将项目放在网格单元的中心，而不是将它们完全缩小到仅内容。这可能吗？
我在stackblitz上做了一个简单的例子。您会看到那里的项目没有用背景色填充整个网格单元。使该功能正常工作的正确方法是什么？我可以删除justify-items / align-items类，但是内容不再居中。
https://stackblitz.com/edit/angular-8bggtq?file=app/app.component.html
单元格已填充，但内容不在中心：
单元格未填充，但内容居中：
.wrapper {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
justify-items: center;
align-items: center;
}
.item {
//justify-self: stretch;
//align-self: stretch;
}
.one {
background: red;
}
.two {
background: pink;
}
.three {
background: violet;
}
.four {
background: yellow;
}
.five {
background: brown;
}
.six {
background: green;
}
html,
body {
margin: 0;
}<div class="wrapper">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div …推荐指数
解决办法
查看次数
垂直和水平居中网格容器
令人惊讶的是,我无法在网上找到任何相关信息.也许我错过了什么.如何使用CSS Grid水平和垂直地将整个主包装器中心放置,显然,保持响应性？
.wrapper {
display: grid;
grid-template-columns: minmax(100vw, 1fr);
grid-template-rows: minmax(100vh, 1fr);
align-items: center;
justify-content: center;
}<div class="wrapper">
<div class="centerthis">loremloremlorem</div>
</div>使用上面的CSS,它div是垂直居中,但不是水平居中.
以下CSS将div水平居中,但不是垂直居中:
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
}
.centerthis {
align-self: center;
justify-self: center;
}<div class="maingrid">
<div class="centerthis">loremloremlorem</div>
</div>推荐指数
解决办法
查看次数