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?も別の帯に小見出しで表示され、真ん中に整列されています。ボットの見出しとサブ見出しは別々の色の帯にあります。

私はHTMLやJavascriptがわからないので、これをどうすればできますか？

UPDATE：それはあなたがpicから見ることができますcurrently.Asどのように見えるか以下

はどちらも、それは真ん中（左右均等）に揃えたがHow can I help you重畳ますし。私が欲しいのはWelcome！ 1つの青いバンドにあるが、中間に、次に同じようなバンドに合わせる。how can I help you?

出典

2017-12-18 user2916886

'クラス= "WC-メッセージからボットWC-メッセージから"' '.'取り除きます。 –

@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

「ウェルカム」のような色のついた旗の中に「どうすれば助けますか？ありますか？緑のバナーのように？ – user2916886

このコードをhtmlファイルとして保存してクロムで開くと、別の出力が表示されます。 'Welcome'は左側にあるので、'どうすればあなたを助けることができますか ' – user2916886

@ user2916886 Chromeは他のブラウザと同じコードですが、ブラウザに依存しないブラウザは「#BotChatGoesHere」と「.help-container」が必要です.cssファイルに追加する。あなたはそれを追加していますか？ – norbidrak

Javascript/html中間のテキストを整列してサブ見出しを追加

答えて

関連する問題