CSS Flexbox (开始、居中、结束)全屏显示

文章/答案/技术大牛

发布

3回答

html、css、flexbox

如何让CSS Flexbox看起来像这样： ? 不是这样的： ? 我的不是整页，我不知道为什么。

浏览 21提问于2020-11-29得票数 1

回答已采纳

10回答

Flexbox在IE中不垂直居中

internet-explorer、css、flexbox、internet-explorer-11

但是，页面并不以IE11居中。我可以通过调整页面的正文使页面在IE中居中，但是如果我这样做了，那么内容就会开始离开屏幕朝向顶部，并切断内容的顶部。下面是两个场景。请参阅相关的Fiddles。CSS编辑：当使用Fullscreen API全屏显示外部div时，所有浏览器都会正确地使用原始居中。但是，在离开全屏模式时，IE将恢复为水平居中和垂直顶部对齐。编辑：IE11使用非供应商特定的Flexbox实现。在Chrome

浏览 130提问于2013-10-15得票数 122

2回答

如何为每个字母设置一个宽度？(单词间距要覆盖上级宽度的100% )

css

我的意思是，如果我有这样的东西：S S C A W I I I I A A A我已经尝试了flexbox，但当我需要相同的开始和结束位置时，项目会居中对齐。有人知道怎么设置这个吗？

浏览 0提问于2019-02-12得票数 0

1回答

Flexbox div宽度在移动设备上溢出

html、css、flexbox

我在WordPress上使用Visual Composer创建的这个站点()需要在全屏div中水平和垂直居中的元素。所以我使用了下面的flexbox CSS代码：height: 100vh;display: -ms-flexbox;它在台式机和平板电脑上运行良好。如何让元素在较小屏幕上垂直居中</e

浏览 7提问于2017-02-17得票数 0

3回答

水平和垂直居中文本

html、css

我想垂直和水平居中的一些文本在一个div，其中包含旁边的图像。到目前为止，我只让它以水平为中心，而让它以垂直为中心是很麻烦的。这是jsfiddle：#titleheader{ text-align: center; background:#f2f2f2

浏览 1提问于2015-07-08得票数 0

2回答

如何在多行列表中对最后一项进行居中，以保持每一行的高度和相同的间隔？

css

在小分辨率中，没有问题，因为我将只显示一行一项，但在较大的设备或桌面中，每行项目的数量将是随机的(根据视口，响应)。项之间的间距相同，但行的开始或结束处不相同(如对齐-：空格之间) 我分析了不同的选择，但没有一个能解决我所有的需求。网格:保持项目间高度一致的大选项，但是最后一行不能居中</

浏览 2提问于2019-10-14得票数 1

2回答

垂直居中div中的两个元素

html、css、centering

我尝试将两个<p>元素垂直居中。我会尝试其他方法，但这里的大多数问题都指向那个教程。

浏览 0提问于2012-08-16得票数 16

回答已采纳

2回答

文本对齐:居中不居中文本

css

我想知道如何将这个页面中的字形居中，它们是使用@font-face的icon-font，但即使在我对包含每个字形的锚点应用text-align:center之后，它们也不会居中。我更喜欢不涉及CSS3的flexbox的解决方案。另外，如果您可以将标题中的最后一行文本居中，我将非常感谢，因为这看起来也不居中。

浏览 3提问于2013-04-06得票数 0

回答已采纳

3回答

使用flexbox居中，以及为什么使用位置会破坏ui

javascript、html、css、sass、node-sass

someotherwebsite.com"><div className="linkedin-icon"><FaLinkedin className="linkedin-text" /></div></a> </header> 这是我的CSS我希望将和居中，如下图所示： ? 放置适用于所有屏幕分辨率的元素的最佳方式是什么？另外，为什么使用position属性会破坏不同屏幕分辨率的ui流，另一种将项目定位

浏览 14提问于2021-08-29得票数 0

2回答

css柔性盒包装:模拟伪类来选择主轴/交叉轴上的开始/结束项目？

html、css、flexbox、pseudo-class

Flexbox是一件很棒的事。但为了获得更多的功能，当使用弹性包装时:它需要伪类，类似于第一个孩子或最后一个孩子或第九个孩子。它将非常舒适地知道，如果项目在结束的主轴，或它被包装，现在它是在主轴的开始。例如，我想要这样：{ flex-flow:row wrap;{} .flexbox .item:flex-

浏览 2提问于2016-07-19得票数 11

0回答

用于省道的Css角2材料组件。如何使字形居中？

html、css、angular、dart、angular2-material

</div>Css： text-align: center; border: solid black;} margin-left: 50%;结果：我正在尝试将中的字形图标居中

浏览 2提问于2016-12-31得票数 0

回答已采纳

2回答

当我使用'position: fixed‘时，我如何从它的中心放大div元素？

jquery、html、css

单击后，我想让它全屏显示，所以我添加了一个具有以下属性的类：height: 100vh; width: 100%; position: fixed; top: 0px; left: 0px; transition问题是css转换从固定位置的原点(左上角)开始。如何实现从固定大小到100%w/h的过渡效果，以便css转换将从元素的中心发生，从而从侧面(向上/向下)推动其他元素？如果没有position:fixed; top:0px; left:0px;，转换自然会发生(从div的中心<

浏览 0提问于2015-12-08得票数 1

3回答

最受支持的垂直对齐方法？

html、css、responsive-design、internet-explorer-8

直到最近，我一直在使用Flexbox垂直对齐元素，如下所示：display: -webkit-flex;-ms-flex-align: center;-webkit-box-align: center;然而，我已经开始致力于越来越多的项目，这些项目需要支持不支持Flexbox的旧浏览器，例如Internet Explorer8。我希望开

浏览 2提问于2017-01-09得票数 1

2回答

Google Chrome 28.0全屏API -不支持CSS* 'width:100%‘*

javascript、jquery、html、google-chrome

在Google Chrome27.0之前，我们能够在页面上显示640x480的图像(来自IP摄像头)，并且能够使用JS full screen API通过element.requestFullScreen("#myelement")使该元素全屏显示。通过在CSS中设置“height: 100%；width: auto；”，图像可以拉伸到适合99%的屏幕。这适用于Google Chrome (28.0之前的版本)和Mozilla Firefox。从Google Chrome 28.0开始

浏览 1提问于2013-07-24得票数 0

1回答

为什么chrome不能在嵌入的twitter时间轴上呈现flexbox定位？

javascript、html、css、twitter、flexbox

有谁能解释一下为什么Chrome (版本78.0.3904.97)不支持flexbox css在网页中居中显示Twitter时间轴？使用Twitter生成的代码将Twitter时间轴嵌入到网页中，我发现在Chrome中尝试将时间轴居中是不可能的。它在Safari中工作得很好。css */ display: flex; align-items: center; justify-content:cen

浏览 15提问于2019-11-18得票数 0

3回答

Bootstrap CSS将文本与标题对齐

html、css、twitter-bootstrap

我有两列(col-md-4和col-md-8) col-md-4有一个段落元素，col-md-8有一个h1元素。我试图做的是让两个元素在中间对齐，我尝试使用行高，但在小屏幕上，有时文本在两行上，并且有很大的间距，所以我的问题是，无论段落元素中有1行、2行还是3行，我如何在中间对齐这两个元素。 <div class="container"> <

浏览 2提问于2017-04-21得票数 0

3回答

如何将按钮对齐到屏幕html的中心

html、css

class="button"> </button> css

浏览 3提问于2021-06-04得票数 1

回答已采纳

2回答

如何在不使用flex的情况下水平对齐div中的项目

javascript、html、reactjs、forms

我想在不使用flex的情况下水平对齐项目。在下面的示例中，我希望标签、输入和跨度水平对齐。Cuurently display:flex可以正常工作，但我不想使用flex <div class="input-group" style="display: flex; align-items: center;"><span class="control-label" style="color:

浏览 50提问于2021-09-20得票数 0

1回答

为什么flexbox会让我的广告内容消失(有时)？

css、flexbox

我使用flexbox在移动设备上居中放置包含google广告的div容器。我有两个容器，可以这样描述...<div class='outer'></div>align-items: center;justify-content: center;min-height: 84v

浏览 1提问于2021-07-08得票数 0

1回答

将png/jpg文件作为svg列出

html、css、svg

因此，我想为居中jpg/png文件的svg Image创建代码。这有可能吗？

浏览 11提问于2017-01-31得票数 0

点击加载更多