将多个 div 对齐一行并将文本垂直和水平居中

Posted 2023-03-05

【中文标题】将多个 div 对齐一行并将文本垂直和水平居中

【英文标题】：Align multiple divs in one line and center text vertically and horizontally

【发布时间】：2014-02-21 04:54:03

【问题描述】：

我想将多个div 对齐到一行 以及center 的内容垂直和水平。 p>

垂直对齐的文本可以是单行，或<p>段落。

【问题讨论】：

@wared ：感谢分享伙伴，真的很感激，但我的意图还不错....事实上，我看到很多黄金会员以类似的方式发布....观看这些解决方案是这个问题存在的一个聪明的孩子:)

我理解你的想法，黄金会员的“自我回答问题”有时真的很有帮助（***.com/questions/14220321/…），关于相当热门的话题，而且有据可查。也许你的主动性会以同样的方式发展 :) 祝你好运 :)

@wared：谢谢小伙子！！

【参考方案1】：

在一行中显示n个divs，有3种方法

使用display:table; IE8 及以上版本支持此方法，如果您有大量 css 和文本以及要对齐 divs，则非常方便 p>

使用float:left;一直很喜欢，老派的方法，当必须考虑旧的浏览器支持时，最推荐这种方法，需要clear最后的浮动

使用display:inline-block;个人从未使用过这个方法 float 方法被我考虑而不是使用这个

基础 CSS

/************Supported by IE8 and above *******************/
 div.table 
    width:100%;        /* important */
    display:table;
    text-align:center;

.table-cell 
    display:table-cell;
    vertical-align:middle;

/************ Method 2 *******************/
 div.inline 
    width:100%;
    display:inline-block;
    text-align:center;

div.inline-div 
    width:32%;
    display:inline-block;

/************ Method 3 *******************/
 .float-class 
    width:100%;
    text-align:center;

div.floatdiv 
    float:left;
    width:32%;
    border:1px solid black;


.clearfloat 
    clear:both;

fiddle showing all three methods in 1 place

在 div 中垂直居中 one line

再次使用 3 种方法：请记住，解决方案必须是响应式的，所以 margin-top:25% or 50% 是行不通的！！！

line-height当父 div 的维度已知时，这种方法很有用，那么您可以简单地使用技巧 line-height:equal to height of parent div

position想法是使parent定位relative和文本跨度类absolute，然后使用absolute文本居中定位top/bottom

display:table-cell如果不需要 IE7 及更早版本的支持，强烈推荐，只需使用 vertical-align:middle;

基础 CSS

div.fixed-div-height 

    height:200px;
    width:200px;
    text-align:center;

div.fixed-div-height span 
    line-height:200px; /* equal to height of the fixed div*/



div.unknown-div-height 
    height:100%;
    text-align:center;
    position: relative;

div.unknown-div-height > span.unknown-div-margin 
    display:inline-block;
    height:20px;
    position: absolute;
    top: 50%;
    left:0;
    right:0;



div.for-ie8-and-above
    width:100%;
    display:table;
    height:400px;
    text-align:center;

div.for-ie8-and-above > div
    height:400px;
    width:100%;
    display:table-cell;
    vertical-align:middle; /* key here */

fiddle showing all three methods

将段落垂直居中居中 这是棘手的部分

实际上没有可能的方法来center 和parapgraph 其height 和containers height 是未知的，除非您寻求一些技巧......最后引用了一个这样的技巧这个答案来自 css 技巧！！

最简单，使用：

div.table-cell 
    height:400px; /* can be anything, even in percentage*/
    width:100%;
    display:table-cell;
    vertical-align:middle;   /* key here */

fiddle showing remaining 2 possible cases

此处发布的另一个解决方案： How do I vertically center text with CSS?

display:tables 的 IE 破解： CSS Tricks

【参考方案2】：

我通过创建一个容器 DIV 来对齐一个表格单元格 (td) 内的多个 div，如下：

<td>
    <div class="containingDIV"> // container DIV with CSS as below
        <div></div>
        <div></div>
        <div></div>
    </div>
</td>

包含DIV的css是：

.containingDIV 
    display: flex;