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

-2

我有这个HTML/javascript代码，我在页面上有一个标题。我所试图做的是排列在中间这个标题（左，右对齐），然后在它下面添加一个小标题这也是在中间对齐：Javascript/html在中间对齐文本并添加子标题

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

在上面的什么，我想do有Welcome!在中间对齐（左右对齐），然后正下方有How Can I help you?也显示在另一个band中作为子标题并在中间对齐。 Bot的标题和副标题是分开的彩色条带。

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

UPDATE：

下面是如何看起来像currently.As可以从PIC看到它也没有对齐，以中间（左右相等），但How can I help you被叠加。我想要的是Welcome！在一个蓝色的乐队，但对齐到中间，然后另一个类似的乐队how can I help you?

来源

2017-12-18 user2916886

'类= “WC-消息从WC-消息从-BOT”''除去.'。 –

@AbhishekPandey我删除了它，但没有改变......'欢迎！'和'我该怎么帮助你？'仍然对齐到左边 – user2916886

仅仅因为你没有将它们对准中间/中间，提供了正确的代码。 –

我不知道你是什么试图实现。我添加了“.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>

来源

2017-12-18 12:26:10 norbidrak

我该怎样才能帮助你''我也可以在'Welcome'是什么？像一面绿色的旗帜？ – user2916886

当我将这段代码保存为html文件并在chrome中打开时，我看到了不同的输出。 '欢迎'是左侧，'我怎样才能帮到你' – user2916886

@ user2916886 Chrome和其他浏览器的代码是一样的，这里没有任何浏览器依赖，“#BotChatGoesHere”和“.help-container”需要被添加到.css文件。你添加了吗？ – norbidrak

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

回答

相关问题