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

墨蓝 2022-09-21 01:28 216阅读 0赞

代码：主要是样式：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>

![Center][]

![Center 1][]

[Center]: /images/20220721/0e37b8b3dd4d425db5077c760b3511a7.png
[Center 1]: /images/20220721/45c51bd610654d7a85433ee3b613e417.png

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 83 阅读

相关 CSS实现:文字少居中显示，超过一行居左显示

需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？代码： <!DOCT

电玩女神/ 2023年01月13日 14:53/ 0 赞/ 246 阅读

相关 html设置多个div并排显示

html设置多个div并排显示 <body> <div id="qipa250_1" style="background-color: blue;

秒速五厘米/ 2022年11月07日 05:29/ 0 赞/ 178 阅读

相关 html布局垂直居中显示,【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为： .style\{margin:0 auto;\} 数

╰半橙微兮°/ 2022年10月09日 04:58/ 0 赞/ 271 阅读

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

代码：主要是样式：display:table-cell; <style> .primary_button { border-styl

墨蓝/ 2022年09月21日 01:28/ 0 赞/ 217 阅读

相关一行div框，两边顶头显示

<style> .pdiv{background-color:999; width:1000px; height:500px; overflow:hidden;

偏执的太偏执、/ 2022年07月27日 10:45/ 0 赞/ 166 阅读

相关居中显示

1.多个块盒并排水平显示（三个div为例子）第一步：先三个div并给他们设置宽高背景色 <!DOCTYPE html> <html> <

柔情只为你懂/ 2021年12月19日 16:39/ 0 赞/ 338 阅读

相关多个div一行显示，超出的自动排列到下一行

<div style="width: 600px;"> <div style="display: inline-block;width: 100px;mar

迈不过友情╰/ 2021年12月18日 05:35/ 0 赞/ 585 阅读

相关 freetype多行显示,居中显示

转载自：[https://www.cnblogs.com/lifexy/p/8514154.html][https_www.cnblogs.com_lifexy_p_85141

Love The Way You Lie/ 2021年11月29日 23:02/ 0 赞/ 481 阅读

相关多个div在一个div中一行水平显示

1.使用 inline-block .an{ display: inline-block; }

小鱼儿/ 2021年09月27日 11:26/ 0 赞/ 391 阅读