草庐IT

vertical-middle

全部标签

html - IE9 link hover css color change vertical shift 浏览器

IE9将鼠标悬停在链接上,将一些HTML推到页面下方。当我从中移除颜色时td.subarea>h2>a:hover{color:#aa051a;text-decoration:none;}问题没有发生。我无法将所有代码粘贴到此处,并且可以肯定这是该页面的一个独特问题。但也许外面有人见过类似的东西。它不会将链接(标签)移到页面下方,而是移动整个包含表。 最佳答案 当容器元素设置为overflow:auto并且子元素中发生了一些悬停Action时,IE9中似乎会出现此问题。有一个非常简单的解决方案,就是将min-height:0px添加

html - 如何获得 float :right button to vertically align in the middle

我只是无法让align-right类的按钮在中间垂直对齐。HTML:SaveCSS:.panel-footer{height:70px;vertical-align:middle;border:solid;}.header-footer-item{display:inline-block;line-height:70px;border:solidred;}.align-right{float:right;}.align-middle{vertical-align:middle;}这是jsfiddle:https://jsfiddle.net/d1vrqkn9/2/如果我从按钮中删除fl

html - 显示 :inline-block and overflow:hidden leading to different vertical alignment

以下代码在不同浏览器中呈现不同(IE=FF=高于基线,Chrome=在基线上)。这是谁的错?我应该在哪里提交错误报告?你知道如何解决这个跨浏览器的问题吗?如果我更改垂直对齐方式,它会在某些浏览器中运行,但在其他浏览器中无法运行。.a{display:inline-block;overflow:hidden;color:red;}baseline__test__baselinehttp://jsfiddle.net/T2vQj/ 最佳答案 是的。你需要做这些:移除样式overflow:hidden;。这里不需要。仅当您提供width或

javascript - BXSlider 4 在移动设备上全屏 : How to keep native vertical page scroll (up, 向下)但保持水平触摸功能(左、右)?

以下片段应该可以很好地说明问题:(function($){$('.bxslider').each(function(){varbxid=$(this).attr("data-bxid");varbx=$(this).bxSlider({auto:false,autoStart:false});});})(jQuery);/*Styles*/#before,#after{width:350px;height:350px;background-color:#ccf;}/*BXSlider*/.bx-wrapper{position:relative;margin-bottom:60px;p

html - CSS,垂直对齐 : middle with bootstrap

我有一个非常简单的HTML/CSS问题,这个问题也经常被问到,但不幸的是,经过我的研究后我也没有让它工作。我正在使用Bootstrap(3RC2),我想将图像垂直对齐到一行的中间。第二个较小的图像应在div.row的中间垂直居中。但是,它似乎不起作用。您可以使用此fiddle查看问题:http://jsfiddle.net/veQKY/2/要求不破坏Bootstrap的响应能力,即当使用宽度较小的设备时,第二张图片应水平装订在第一张图片下方。 最佳答案 .centerFlex{/*InternetExplorer10*/displa

javascript - 通缉 : jQuery selector with variable part in the middle

考虑以下HTML:test1test2test3我想要一个选择器来选择看起来像$('div[id=Kees_{anynumber}_test]')的div。我怎样才能做到这一点?注意:ID由Asp.Net生成。 最佳答案 试试这个:$('div[id^=Kees_][id$=_test]')该选择器选择所有ID以Kees_开头并以_test结尾的元素。正如lonesomeday所建议的,您可以使用.filter()来确保中间部分只包含数字。您可以将.filter()与上面的示例结合使用:$('div[id^=Kees_][id$=_

javascript - AngularJS- ionic : create a swipeable horizonatlview which will update vertical view

我想使用angularjs和ionic创建适用于Android和iOS的UI。View如下:说明:在这个View中,我想要一个包含日期的水平条(当前显示1到8个日期,但它可以从每月的第1天到每月的最后一天滑动)。该条可左右滑动。每天都会有一些数据显示在垂直ListView中。当用户同时在水平条上向左或向右滑动时,垂直数据将更新。垂直ListView将仅显示水平条中显示的日期的数据。我不确定我该怎么做。任何指针,例如库/示例代码等将不胜感激。谢谢 最佳答案 我会推荐swiper,我以前用过它,我发现它简单易用:http://idang

vertical-alignment - CSS 垂直对齐和基线位置

我是CSS的新手,最近阅读了规范,但在理解垂直对齐属性方面遇到了一些问题。上面的代码创建了3个div,每个包含3个空的内联框(spans):在第一个div中,一切似乎都很好。所有3个跨度都与线框的基线对齐。在第二个div中,在我将第三个跨度的vertical-align属性设置为top后,前两个跨度向上移动。我从这里迷路了,我不明白为什么他们会根据什么规则被提升。第三个div更适合我。我将第一个跨度的vertical-align属性设置为bottom,它导致第二个跨度比第三个跨度移动略低(放大到足够大时会注意到这一点)。我在规范中找到的内容如下所述,但是多种解决方案到底是什么?谁能对此

html5 : three-rows flexbox with fixed top/bottom and scrollable middle

是否可以制作一个具有固定header/footer和可滚动article部分的html5flexbox布局,如下所示firefox24和chromium31?+----------+|header|+----------+|article|||||||||||+----------+|footer|+----------+我试过这个(简化版):body{display:flex;flex-direction:column;}header{flex:1;}article{flex:8;overflow-y:scroll;}footer{flex:1;}现在我试图用article填充剩余空

HTML/CSS : Vertical border overlapping horizontal border

这是fiddle:http://jsfiddle.net/AV38G/HTMLSomeFoobarStufffoobarraboof184bar87458184874rabooffoobarCSS:/*ACTUALCSS*/table{width:300px;border-collapse:collapse;}trtd.first-column{border-left:none;}tr.first-line{border-bottom:3pxsolidgreen;border-top:none;}tr.first-linetd{border-left:none;}td{border-l