问题内容: 我试图用flex框将内容垂直居中,但没有成功。我不喜欢使用或因为它不是固定大小。我的代码有什么问题? 问题答案: 您的伸缩容器没有多余的高度。唯一的高度是内容的高度。因此,没有用于垂直居中的空间。 第一步,增加一些高度: 第二步,删除不必要的规则,其中一些规则会阻止垂直对齐。
问题内容: 我有两个要素并列。元素2小于元素1。两个元素都不具有固定的高度。我需要将元素2垂直居中。如何使用CSS做到这一点? 编辑: 这是我到目前为止的内容: img1的高度将始终大于img2的高度。我希望img2垂直居中对齐。希望这可以澄清我要完成的工作。 问题答案: 最简单,最干净的方法是使用并垂直对齐。但是,IIRC(自从我开始浏览器兼容性问题以来已经有一段时间了)……也许某些普通版本的I
问题内容: 我正在尝试在屏幕的正中央为我的网站中心的目标网页创建一个div,但是它不起作用。 这是我的代码 CSS: HTML: 谢谢。 问题答案: 注意: 如果您尝试将div水平和垂直居中放置,建议您查看flexbox。您仍然需要提供后备支持,但是flexbox是未来,这太神奇了。 更新: 现在所有现代浏览器都支持flexbox 。 首先,您需要给div静态宽度和高度。 其次,你必须设置和那么你
问题内容: 要求 弹性盒 垂直中间 水平向左 垂直堆叠的子元素 子元素的数量可以是一个或多个 使用旧语法,以便Android 4.2能够理解 听起来很难描述。演示中的粉红色框是我想要的外观。绿框已经很好,只是我不知道如何处理多个子元素。 我认为解决方案可能是以下各项的组合,但我做不到。 Codepen演示 问题答案: 沿主轴对齐弹性项目。 沿始终垂直于主轴的横轴对齐弹性项目。 取决于,主轴可以是水
问题内容: 我已经看过一百万个关于如何居中放置块元素的问题,而且似乎有几种流行的方法可以做到,但是它们都依赖于固定的像素宽度。然后,要么使用绝对定位,要么使用绝对/相对定位等等。我们都知道,如果元素的宽度设置为%,则此方法将无效。 真的没有办法真正流畅地执行此操作吗?我说的是使用宽度( 不是 用固定宽度越来越小的设置十二个媒体查询)。 当心:有大量的解决方案使用流行语“响应”,但 没有 回答我的问
问题内容: 我正在寻找一种将div 垂直居中放置在页面中间的方法。 在必须适应于屏幕的整个高度和宽度。的div有一个宽度和应在该页面(垂直中心)的中间。 我希望此页面的大屏幕适应屏幕的高度和宽度,并且容器垂直于大屏幕垂直居中。我该如何实现? 问题答案: 灵活的盒子方式 *现在,通过使用弹性框布局,*垂直对齐 非常简单。如今,除Internet Explorer8和9之外,各种Web浏览器都支持此方
问题内容: 这可能是一个愚蠢的问题,但是由于居中对齐图像的常规方法不起作用,所以我想问一下。如何在容器div内居中对齐(水平)图像? 这是HTML和CSS。我还包括了缩略图其他元素的CSS。它以降序运行,因此最高的元素是所有内容的容器,最低的元素是所有内容的内部。 好的,我添加了不带PHP的标记,因此应该更容易理解。这两种解决方案似乎都无法在实践中起作用。顶部和底部的文本不能居中,并且图像应在其容
问题内容: 有没有办法在 垂直和水平方向上输入一个DIV, 但这很重要, 当窗口小于内容时,内容将不会被剪切 。div必须具有背景色,宽度和高度。 我总是将div的中心定位为绝对位置和负边距,如提供的示例所示。但是它有一个问题,那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题? CSS: HTML: 我的问题不是重复的“如何在水平和垂直方向上居中放置元素?”1-
问题内容: 我正在尝试垂直居中放置两个元素。 我在phrogz.net上按照教程进行操作,但仍然将元素放置在div上方,div下方,在div中顶部对齐。 我会尝试其他方法,但是这里的大多数问题都只是指向该教程。 此代码段用于网页顶部的横幅。 问题答案: 添加以下内容:display:table; 到bannerRight 显示:表格单元格;和vertical-align:middle; 向bann
问题内容: 编码: 如现在所呈现的,跨度与div的左下角对齐。 问题答案: 请参阅我关于理解垂直对齐的文章。在讨论的最后,有多种技术可以实现您想要的。 (超简短摘要:或者将子级的行高设置为等于容器的高度,或者将子级的高度设置为在容器上并将子级绝对定位为,其中YYY为子级已知高度的一半。)
问题内容: 我的网站上移动菜单的底部有一个基于伸缩的无序社交媒体图标列表。 我正在尝试让三排并排坐,等距离分开。我已经用规则来解决了 但是 我的问题是,当有三个以上的项目时,下一行从中间开始填充,而我希望 随着用户添加更多图标, 它从左侧开始填充 。 我越深入地解释这一点,我就越不确定这是否可能,但是我想我还是把它扔出去了,以防万一。 是否可以使下一行中的列表项从容器的左侧开始,而不会弄乱规则?
问题内容: 我想知道xhtml 1.0中有哪些严格选项可以在像这样的文本两边都创建一行: 我曾想过要做一些花哨的事情,例如: 或者,因为上述方法在对齐方面存在问题(垂直和水平对齐): 这也有对齐问题,我可以用这个烂摊子解决: 除了对齐问题之外,这两个选项都让人感到“前途未卜”,如果您碰巧曾经见过这一点并且知道一种优雅的解决方案,我将非常感激。 问题答案: 我不知道这是否已经解决,但是flexbox
问题内容: 可以说我有一个带有字体真棒图标和一些文本的引导按钮: 编辑: 我有一个可能的 解决方案 但感觉有点hacky-引入了额外的p标签,使用了left-left和display:table。也许有人可以建议一种更简单的方法。 问题答案: 在考虑了所有建议的选项之后,最干净的解决方案似乎是设置所有行的高度和垂直对齐: 参见 Jsfiddle演示 CSS:
问题内容: 是否可以将div垂直居中放置在%高度div中? 问题答案: 在这里以及在整个Internet上,已经被要求足够多次了。快速搜索将为您带来大量结果。无论如何,我这样做的首选方式是使用和。有关示例,请参见此页面。(请注意,这不适用于IE6。)
问题内容: 如何将无序列表居中放置为固定宽度? 问题答案: 由于和元素是默认设置-为它们提供自动边距,并且宽度小于其container。 如果您更改了它们的显示属性,或做了一些覆盖常规对齐规则的操作(例如浮动它们),则此操作将无效。