一行显示多个div 并居中显示

最新推荐文章于 2021-08-04 01:30:07 发布

原创最新推荐文章于 2021-08-04 01:30:07 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript/JQuery 专栏收录该内容

9 篇文章

订阅专栏

本文通过实例展示了如何使用 display: table-cell 实现居中布局，并结合 HTML 结构展示了一个具体的按钮组样式。每个按钮内含图标及文字说明，通过 CSS 属性实现了良好的视觉效果。

代码：主要是样式：display:table-cell;

<style>
	.primary_button
	{	
		border-style:solid; 
		border-width:1px; 
		border-color:#ebebeb;
		cursor:pointer;
		width:298px;
		height:130px;
		display:table-cell;
        vertical-align:middle;
	}
</style>
	
	
	<center style="margin-top:50px">
    	<div class="primary_button" >
    		<table class="myTable">
    			<tr>
    				<td rowspan="2"><img id="u4_img"  src="../images/taskAllNew/icon01.png"></td>
    				<td class="paddingTd"><p class="bigText"><span>通用立项</span></p></td>
    			</tr>
    			<tr>
    				<td class="paddingTd"><p class="smallText"><span>一般类项目立项入口</span></p></td>
    			</tr>
    		</table>
    	</div>
    	
    	<div style="width:80px;display:table-cell;"></div>
    	
    	<div class="primary_button" >
    		<table class="myTable">
    			<tr>
    				<td rowspan="2"><img id="u4_img"  src="../images/taskAllNew/icon02.png"></td>
    				<td class="paddingTd"><p class="bigText"><span>管道规划立项</span></p></td>
    			</tr>
    			<tr>
    				<td class="paddingTd"><p class="smallText"><span>传输网管道类立项入口</span></p></td>
    			</tr>
    		</table>
    	</div>
	</center>