[英]Divs not aligning
I have 3 simple divs with some cosmetic styles that are supposed to be aligned in a row, Two of them have images that are on the left and right sides while middle one contains another div containing text. 我有3个简单的div,其中一些装饰样式应按行对齐,其中两个的图像左右两侧,中间的一个包含另一个包含文本的div。
I am able to fit the image in divs but the middle one that contains text is not aligning horizontally with other two. 我可以使图像适合div,但包含文本的中间一个不能与其他两个水平对齐。
Following is the html 以下是html
<div class="eggpic">
<img src="smiley.gif"/>
</div>
<div class="timersection">
<div class="timersectiontext">Hello</div>
</div>
<div class="buttonpic softboil">
<img src="smiley.gif"/>
</div>
Here is the jsfiddle link or that http://jsfiddle.net/4bg7uyoj/1/ 这是jsfiddle链接或http://jsfiddle.net/4bg7uyoj/1/
Please help in aliging all the divs. 请协助所有div。
Thanks in advance. 提前致谢。
are you displaying the divs using display: inline-block; 您是否使用display:inline-block;显示div? ?
? If so you could try adding this to all three divs:
如果是这样,您可以尝试将其添加到所有三个div中:
vertical-align: middle; 垂直对齐:中间;
Otherwise wrap all three divs with another div and display the parent as a table 否则,将所有三个div换成另一个div,然后将父级显示为表格
display: table; 显示:表;
Then display all three child divs as table cells and verticall align them: 然后将所有三个子div显示为表格单元格并垂直对齐它们:
display: table-cell; 显示:表格单元格; vertical-align: middle;
垂直对齐:中间;
使用float:left代替display:inline-block并为父div设置一些高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.