Question

我有一段文字，长度和宽度都会发生变化。无论文本的长度如何，如果可能的话，我想通过css的方式水平和垂直居中。

它总是在中心。

如果文本并不总是通过CSS更改，我知道如何将文本居中。我可以通过Javascript进行图像处理，但是如果有通过css的方法来做这个技巧，我想知道它。

以下是我的示例代码：

HTML

<h1 id="description">Play</h1>

CSS

description{
        height: 20px;
        width: 60px;
        text-align: center;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        color: black;
}

我的容器高度和宽度均为100％。

这个CSS显然不起作用。

小提琴：http://jsfiddle.net/ST59z/

谢谢你，利安

Answer 1

你想要这样的东西吗？http://jsfiddle.net/ST59z/9/

代码：

#description{
    height: 20px;
    width: 60px;
    text-align: center;
    margin:auto;
    position: absolute;
    vertical-align:middle;
    top: 0; left: 0; bottom: 0; right: 0;
    color: black;
}

CHANGE：

margin:auto;
vertical-align:middle;

Answer 2

为了在未知尺寸中垂直和水平对齐元素，您可以按照 this approach 。

你走了：

.container {
    background-color: gold;
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {      /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#description {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: bold 36px/1 Arial sans-serif; /* reset the font property */
}

<强> WORKING DEMO

Answer 3

以下是一些更改：

#description {
    height: auto;
    width: auto;
    text-align: center;
    max-height:100%;
    max-width:80%;
}

更改大小的项目上的水平和垂直对齐css

3 个答案: