将一行中的多个div对齐，并将文本中心和水平对齐 [英] Align multiple divs in one line and center text veticaly and horizontally

问题描述

注意：这是一个参考问题。

Note: This is a reference question. If you see one of the many questions fitting this pattern, please simply refer them as duplicate, referencing this question.

许多访问者提出问题。如果您看到许多问题符合此模式，请将它们作为重复引用。与上下文相关，这里是一个解决方案：

我要对齐 n div 在一行，并将其中的内容垂直和水平 center 。

Many visitors ask question with context referring to, here is a solution for that :

I want to align n number of divs in one line and also place the content in them vertically and horizontally in center.

垂直对齐的文本可以是

The text to align vertically can be a single line or a paragraph <p> too!!

推荐答案

code>或< p&

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

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

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

使用 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

Base 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;
}

小提示在1个地方显示所有三种方法

垂直居中一行在div

To vertically center one line in a div

3种方法：

保持， margin-top：25％or 50％不会工作 !!!

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

• line-height
  
  父div的深度已知，则可以使用 line-height：等于父div的高度

位置

的想法是让 c $ c>定位相对和文本span类 absolute ，然后将 c />

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;

display:table-cell
highly recommended if IE7 and older support is not required, simply use 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 parapgraph 其 height 和容器 高度是未知的，除非你gor为一些黑客....一个这样的黑客已经被引用在这个答案从结束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种可能的情况

：
如何对齐文本在css中的垂直中心

Another solution posted here : how to align text vertical center in div with css

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

IE hack for display:tables : CSS Tricks

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