我如何能中心文本(水平和垂直)在一个div块?

我有一个div设置显示:块(90px高和宽)，我有一些文本在里面。

我需要文本在中心垂直和水平对齐。

我已经尝试了text-align:center，但它不做垂直居中部分，所以我尝试了vertical-align:middle，但它不起作用。

什么好主意吗?

当前回答

这适用于我(测试OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

您可以选择50%以外的其他值。例如，25%到父母的25%的中心。

2016-12-05 20:45:24

其他回答

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

2015-12-09 02:00:54

截至2014年的常见技术:

方法1 -转换translateX/translateY: 这里/全屏示例在受支持的浏览器中(大多数)，您可以使用top: 50%/left: 50%结合translateX(-50%) translateY(-50%)动态地将元素垂直/水平居中。 .container { 位置:绝对的; 上图:50%; 左:50%; translateX(-50%) translateY(-50%); ｝

方法2 - Flexbox方法: 这里/全屏示例在受支持的浏览器中，将目标元素的显示设置为flex，并使用align-items: center用于垂直居中，使用justify-content: center用于水平居中。不要忘记为额外的浏览器支持添加供应商前缀(参见示例)。 Html, body， .container { 高度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝

Approach 3 - table-cell/vertical-align: middle: Example Here / Full Screen Example In some cases, you will need to ensure that the html/body element's height is set to 100%. For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle. For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level. html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }

Approach 4 - Absolutely positioned 50% from the top with displacement: Example Here / Full Screen Example This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px. html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }

Approach 5 - The line-height method (Least flexible - not suggested): Example Here In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element. Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this. .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }

方法4和5不是最可靠的。选前三个中的一个。

2014-09-12 01:23:14

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html>

2018-07-07 14:00:49

方法1

div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; ｝ < div > 你好,世界! ! < / div >

方法2

div { 身高:200 px; 行高:200 px; text-align:中心; 边界:2px虚线#f69c55; ｝跨度{ 显示:inline-block; vertical-align:中间; 行高:正常; ｝ < div > <span>我与你同在，我与你同在。对我说，对我说，对我说。非enim iam stirpis bonum quaeret, sed animalis。< / span > < / div >

方法3

div { 显示:表; 身高:100 px; 宽度:100%; text-align:中心; 边界:2px虚线#f69c55; ｝跨度{ 显示:表格单元; vertical-align:中间; ｝ < div > <span>神圣的神圣，神圣的神圣。</span> < / div >

2017-07-05 12:54:03

你可以在父div中使用flex属性，并将margin:auto属性添加到子条目中:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

你可以在这里看到更多flex的选项:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2018-06-26 10:33:34

我如何能中心文本(水平和垂直)在一个div块?

推荐文章

最新文章

标签