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在中間對齊文本並添加子標題

回答

相關問題