Tag: CSS

我可以结合：nth-​​child（）或：nth-​​of-type（）与任意select器？

有没有办法select匹配（或不匹配）任意select器的每个第n个孩子？ 例如，我想要select每个奇数的表行，但在行的一个子集内： table.myClass tr.row:nth-child(odd) { … } <table class="myClass"> <tr> <td>Row <tr class="row"> <!– I want this –> <td>Row <tr class="row"> <td>Row <tr class="row"> <!– And this –> <td>Row </table> 但是:nth-child()似乎只计算所有tr元素，不pipe它们是否是“row”类，所以我最终得到了一个“row”元素，而不是我正在寻找的两个元素对于。 同样的事情发生在:nth-of-type() 。 有人能解释为什么吗？

Flexbox：水平和垂直居中

如何使用flexbox水平放置div，并在容器内垂直放置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 […]

隐藏滚动条，但仍然可以滚动

我想能够滚动整个页面，但没有显示滚动条。 在Google Chrome中，它是： ::-webkit-scrollbar { display: none; } 但Mozilla Firefox和Internet Explorer似乎并不像那样工作。 我也试过在CSS中： overflow: hidden; 这确实隐藏了滚动条，但我不能滚动了。 有什么办法可以删除滚动条，仍然可以滚动整个页面？ 请只用CSS或HTML。

元素在一个div中的垂直alignment

我有一个div与两个图像和一个h1 。 所有这些都需要在div内相互垂直alignment。 其中一个图像需要在div内absolute定位。 在所有常见的浏览器上，这个工作所需要的CSS是什么？ <div id="header"> <img src=".." ></img> <h1>testing…</h1> <img src="…"></img> </div>

Chrome / Safari没有填充flex父项的100％高度

我想要一个具有特定高度的垂直菜单。 每个孩子必须填写父母的高度，并有中间排列的文本。 孩子的数量是随机的，所以我必须使用dynamic值。 .container包含随机数的子项（ .item ），它们必须始终填充父项的高度。 为了实现我用flexbox。 为了使文本链接与中间alignment，我使用display: table-cell技术。 但是使用桌面显示需要使用100％的高度。 我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。 有没有解决这个问题？ 还是有一种不同的技术，使所有.item填充父母的高度与文本垂直alignment中间？ 这里的示例jsFiddle，应该在Firefox和Chrome中查看 .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; display: table-cell; […]

在div中垂直alignment文本

我正在尝试find最有效的方式来alignment文本与div。 我已经尝试了一些东西，似乎没有工作。 .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; }

Flex项目是否可以紧紧地alignment上面的项目？

实际上，这是Pinterest的布局。 但是，在线发现的解决scheme是用列包装的，这意味着容器无意中水平生长。 这不是 Pinterest的布局，它不适合dynamic加载的内容。 我想要做的是有一堆固定宽度和不对称高度的图像，水平放置，但在固定宽度容器的极限满足时， Flexbox能做到这一点，还是我不得不诉诸像砌体JS解决scheme？

如何让页脚停留在网页的底部？

我有一个简单的2列布局，并在我的标记中清除了右侧和左侧div。 我的问题是，我不能让页脚停留在所有浏览器页面的底部。 它的工作原理是如果内容推下页脚，但情况并非总是如此。 更新： 它在Firefox中无法正常工作。 当页面上没有足够的内容将页脚一直推到浏览器窗口的底部时，我会在页脚下方看到一段背景色。 不幸的是，这是页面的默认状态。

div内的图像在图像下面有额外的空间

为什么在下面的代码 div的高度大于img的高度？ 图片下方有一段空白，但似乎不是填充/边距。 图像下方有多大的间隙？ #wrapper { border: 1px solid red; width:200px; } img { width:200px; } <div id="wrapper"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div>

如何水平和垂直居中元素？

我试图垂直居中我的标签内容，但是当我添加CSS样式display:inline-flex ，水平文本alignment消失。 我怎样才能使我的每个标签的文本alignmentx和y？ * { box-sizing:border-box; } #leftFrame { background-color:green; position:absolute; left:0; right:60%; top:0; bottom:0; } #leftFrame #tabs { background-color:red; position:absolute; top:0; left:0; right:0; height:25%; } #leftFrame #tabs div { border:2px solid black; position:static; float:left; width:50%; height:100%; text-align:center; display: inline-flex; align-items: center; } <div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div>