-1

I'm trying to create a header for a page which has a chatbot script. I want to have a 40px header and the remainder of the page dynamically adjusted to the browser window size. I've got this piece working (I think). But now I'm trying to format the text in the title header, and it doesn't seem to be responding to vertical align or padding. I want the text to be slightly indented from the left edge and vertically centered within the div. Below is my current CSS and divs as well as an image of the result. What do I need to do to get this aligned appropriately?

Note: I added the margin/padding/border: 0 settings because without them my text in chatbotTitle div was creating extra whitespace at the top.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
}

#chatbotTitle {
  height: 40px;
  width: 100%;
  background-color: #0067CC;
  color: #FFFFFF;
  vertical-align: middle;
  font-family: Calibri, Helvetica Neue, Arial, sans-serif;
  padding: 5;
}

#webchat {
  height: calc(100% - 40px);
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>

<body>
  <div id="chatbotTitle">
    <h3>Chatbot</h3>
  </div>
  <div id="webchat" role="main"></div>
</body>

</html>

enter image description here

Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
billoverton
  • 2,705
  • 2
  • 9
  • 32
  • Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) – Zoran Jan 31 '20 at 22:02
  • I saw that but I was having a hard time applying the answers to my setup. Will try the answer below and see if that works. – billoverton Jan 31 '20 at 22:11
  • There are at least 3 answers there mentioning layout flex (same as the one below)... – Zoran Jan 31 '20 at 22:15
  • That may be, but for what it's worth (maybe because I've not dealt with CSS before), I couldn't figure it out. With the answer below I was able to immediately solve my issue. – billoverton Feb 01 '20 at 02:09

1 Answers1

1

Vertical align will not work in this case. Try updating your header to use flex and align it that way:

#chatbotTitle {
    display: flex; // Add flex
    align-items: center; // This will align the children
    height: 40px;
    width: 100%;
    background-color: #0067CC;
    color: #FFFFFF;
    font-family: Calibri, Helvetica Neue, Arial, sans-serif;
    padding: 5px; // Add pixel value
}
Carlton
  • 531
  • 1
  • 5
  • 19
  • This worked, except what I needed was the padding at the element level and on left only, so I added padding-left to my h3 tag. Adding flex and align-items aligned the text vertical center as I wanted. Thanks! – billoverton Feb 01 '20 at 02:10