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

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

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

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

什么好主意吗?

当前回答

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

2018-02-20 03:33:02

其他回答

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

<!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

Use:

# Parent
{
  display: table;
}

# Child
{
  display: table-cell;
  width: 100%; /* As large as its parent to center the text horizontally */
  text-align: center;
  vertical-align: middle; /* Vertically align this element on its parent */
}

2015-02-22 03:34:27

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

这是非常简单的代码，为我工作!它只有一行，你的文本将水平居中。

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

输出如下所示:

2020-03-05 02:42:21

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

2017-03-17 05:25:10

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

推荐文章

最新文章

标签