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

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

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

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

什么好主意吗?

当前回答

您可以尝试以下方法:

If you have a single word or one line sentence, then the following code can do the trick. Have a text inside a div tag and give it an id. Define the following properties for that id. id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; } Note: Make sure the line-height property is same as the height of the division. Image But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a division in px or % (when the division is really small and you want the content to be exactly in the middle). To solve this issue, we can try the following combination of properties. id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; } Image These 3 lines of code sets the content exactly in the middle of a division (irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered. Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.

2017-03-22 06:15: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

调整线高度以获得垂直对齐。

line-height: 90px;

2013-11-19 09:53:26

试试下面的例子。我为每个类别添加了示例:水平和垂直

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

2018-07-04 20:12:54

方法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

GRID

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center { 显示:网格; justify-items:中心; 对齐项目:中心; ｝ .box { 宽度:200 px; 身高:100 px; 背景:红色; ｝ <div class="box center">我的文本</div>

2020-04-06 18:06:07

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

推荐文章

最新文章

标签