使用CSS在响应div中将响应图像垂直居中
达格尼
编辑-根据要求，这里是小提琴jsfiddle.net/daghene/eq4tfzLn/
我已经在Stackoverflow和Google上进行了大量搜索以找到答案，但是即使有很多我也不知道为什么它们不起作用，或者我是否正确处理了这种布局。
基本上，我使用的是Skeleton响应框架来进行单页布局，并且我有一个部分，该行的左侧是该图像，右侧是文本。在它的下面是一个带有最新新闻的Twitter小段落。
基本上我的问题是：当第一行太小并且文本开始变长时，图像变得太小，我认为最好的解决方案是将其垂直居中，但是它和div的高度都是响应性的（大多数解决方案要求两者中至少有一个是固定高度）。
您的建议是什么？更重要的是，我可以从逻辑角度很好地处理此布局吗？或者让段落仅停留在顶部就可以使段落变长吗？
请注意，它在台式机，平板电脑和智能手机上的显示效果都很好，只是其中的一小部分有点奇怪...这是我的布局运作方式的屏幕截图，第三个是我认为应该修复的布局，因为它有点看起来很丑，也许将图像居中会有所帮助。
P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.
P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.
Pete
我会给该thanksup行一个id-例如vertical，然后您可以使用以下样式来实现垂直对齐：
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
@media (max-width: 565px) {
#vertical > .columns {
display: block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使div内垂直居中的响应图像
- 2
响应方形div内的垂直居中图像
- 3
在响应div中垂直居中
- 4
在响应div中垂直居中
- 5
Div全屏和响应式：垂直居中
- 6
在Bootstrap中将响应图像水平居中
- 7
当div背景图像响应时，在div中垂直和水平居中显示文本
- 8
在容器中将响应式DIV居中
- 9
使响应图像居中
- 10
如何在响应图像上垂直居中放置文本？
- 11
响应图像在Bootstrap中垂直居中对齐
- 12
响应图像在Bootstrap中垂直居中对齐
- 13
没有响应的垂直居中div的问题
- 14
响应div中的垂直和水平居中绝对文本
- 15
垂直居中响应式iframe
- 16
如何居中并使div响应
- 17
如何居中并使div响应
- 18
使用CSS将多个响应式图像放入单个div
- 19
如何在响应页面上的div中垂直和水平居中放置两个图像
- 20
响应图像内的响应div
- 21
表格中图像的响应居中
- 22
CSS或JQuery响应式“图像填充div”
- 23
在div中将文本垂直居中
- 24
在DIV中将UL垂直居中
- 25
在div中将内容垂直居中
- 26
在CSS中将块垂直居中
- 27
如何使用CSS在DIV中将文本居中
- 28
CSS：如何在 div 中垂直和水平居中图像
- 29
在 div 内垂直居中图像
我来说两句