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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有这个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?

回答：

我不知道你是什么试图实现。我添加了“.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在中间对齐文本并添加子标题 的全部内容， 来源链接： utcz.com/qa/263114.html

回到顶部