Javascript / html在中间对齐文本并添加子标题

Question

我有这个HTML / javascript代码，我在页面上有一个标题。我要做的是将此标题对齐中间（左右对齐），然后在其下方添加一个子标题，该子标题也在中间对齐：

#BotChatGoesHere {
        text-align: center;
        border: 1px solid #333;
        height: 600px;
        position: relative;
        width: 460px;
      }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Title1</title>

    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />

    <!--<style>
      .example {
        float: left;
        margin-right: 20px;
        width: 300px;
      }

      .example > h2 {
        font-family: 'Segoe UI';
      }
 </style>-->

  </head>
  <body>
    <section class="example">


    </section>

    <div id="BotChatGoesHere"></div>
    <div class ="wc-header">
            <span><b>Welcome!</b></span>
        </div>  
        <div class="wc-message-from wc-message-from-bot">
        <span>How Can I help you</span>
        </div>


  </body>
</html>

在上面我要做的是让Welcome!在中间对齐（左右对齐），然后在它下面有How Can I help you?也出现在另一个乐队作为子标题并在中间对齐。标题和子标题是单独的彩色条带。

我怎么能这样做，因为我不知道HTML或Javascript，看起来我的尝试上面的工作不起作用？

更新：

下面是它当前的样子。正如你从pic中看到的那样，它既不与中间（左右相等）对齐，而是How can I help you叠加。我想要的是Welcome！在一个蓝色的乐队，但对齐中间，然后另一个相似的乐队为how can I help you?

Answer 1

我不知道你想要实现什么。我在课程“.help-container”中加入了“我能帮助你”的位置。如果需要，您可以在那里添加不同的样式颜色，字体大小等。

#BotChatGoesHere {
        text-align: center;
        border: 1px solid #333;
        position: relative;
}

.help-container{
        position: absolute;
        left: 0;
        right: 0;
        top: 39px;
        margin: 0 !important;
        background-color: #9dfb9d; 
}

   <!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Title1</title>

<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />

<!--<style>
          .example {
            float: left;
            margin-right: 20px;
            width: 300px;
          }

          .example > h2 {
            font-family: 'Segoe UI';
          }
     </style>-->

</head>

<body>
<section class="example"></section>

<div id="BotChatGoesHere">
    <div class="wc-header">
        <span><b>Welcome!</b></span>
    </div>
    <div class="wc-message-from wc-message-from-bot help-container">
        <span>How Can I help you</span>
    </div>
</div>

</body>

</html>

Javascript / html在中间对齐文本并添加子标题

问题描述投票：-2回答：1

1个回答

最新问题

Javascript / html在中间对齐文本并添加子标题

问题描述 投票：-2回答：1

1个回答

最新问题

问题描述投票：-2回答：1