在一行中对齐多个div，将文本垂直和水平居中 [英] Align multiple divs in one line and center text vertically and horizontally

问题描述

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

I want to align several div's into one line and also center the content vertically and horizontally.

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

The text to align vertically could be a single line, or a <p> paragraph.

推荐答案

要在一行中显示n个 div s ，共有3种方法

To show n-number of divs in one line, there are 3 approaches

• 使用 display：table;
  
  此方法受IE8及更高版本支持，并且如果您有大量的CSS和文字以及 div s来对齐

• use display:table;
  This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text and divs to align

使用 float：left;

一直以来都喜欢使用旧的方法，建议在支持旧浏览器时使用此方法必须考虑，要求在结尾处清除浮点数

use float:left;
All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requires clearing of the float at the end

使用 display：inline-block;

从来没有使用过这种方法，我个人考虑过使用浮动方法代替

基本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;
}

在一个位置显示所有三种方法的小提琴

要垂直居中<$ c div中的$ c>一行

To vertically center one line in a div

再次3种方法：

保持请记住，解决方案必须具有响应性，因此 margin-top：25％或50％是行不通的 !!!

again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50% is not gonna work!!!

• 行高
  
  这种方法在父div的dimesnion是已知的，那么您可以简单地使用 line-height：等于父div的高度

位置

的想法是使为父对象定位在相对，文本跨度类为绝对，然后将居中绝对文本，使用顶部/底部

position
idea is to make the parent positioned relative and the text span class an absolute, then center the absolute text using positioning like 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 */
}

>用小提琴显示所有三种方法

将a居中垂直居中放置

这是棘手的部分

实际上，没有办法中心一个段落，其高度和容器 高度是未知的，除非您为某些黑客而烦恼.... css在此答案的结尾引用了这样的黑客

Practically there is no possible way to center a parapgraph whose height and the containers height is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!

最简单的方法，使用：

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

>小提琴显示了其余2种可能的情况

发布了另一种解决方案此处：
我如何

Another solution posted here : How do I vertically center text with CSS?

IE hack for display：tables ：< A href = http://css-tricks.com/vertically-center-multi-lined-text/ rel = nofollow noreferrer> CSS技巧

IE hack for display:tables : CSS Tricks

这篇关于在一行中对齐多个div，将文本垂直和水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！