How to center a div like this image?

Question

Can you please tell me how to center a div like this image : https://i.postimg.cc/PJbZTYTg/notice.png

This is what I did :

<tr id="statusrow">
  <td colspan="2" class="textnormal">
    <script type="application/javascript" nonce="">
      window.addEventListener("load", () => {
        document.querySelector('#content input[type="text"]') ? .setAttribute("aria-describedby", "primaryStatusContent");
      });
    </script>
    <div class="statusindicator statusinfo" style="margin:auto; padding:60px;">

      <div style="background-color:yellow;"> Notice </div>

      <div class="statuscontent" role="alert" id="primaryStatusContent" style="background-color:powderblue; color:red; font-size:120%;  margin:-25px 0 0 -35px; padding:10px;"> If you are an external user who works with the state organization within the Commonwealth of Massachusetts and needs to exchange files, please contact your agency to request access.</div>
    </div>
  </td>
</tr>

But the yellow div instead of being in the top it is under the other div.

score 0 · Answer 1 · edited Oct 17 '22 at 13:31

Why not make use of flex. That is the best thing I've learnt recently and has greatly helped me with placing divs properly.

Assuming your yellow div is div-yellow, and the other div is div-details, here's what you can do

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
</head>
<body>
<div class="container">
  <div class="div-yellow">My text heree</div>
  <div class="div-details">Details here are the things that i want to show</div>
</div>

</body>
</html>

score 0 · Answer 2 · answered Oct 17 '22 at 13:35

0

Well, it's simple with the usage of flexbox.
Explaining the styling:

display: flex to make your element flexible.
flex-direction: column to make your div align your items vertically.
align-items: center to allow your items horizontally to the center.

.containers {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yellow-container {
  background-color: yellow;
  color: red;
  width: fit-content;
  font-weight: bolder;
}

.blue-container {
  background-color: #9ACD32;
  color: black;
  font-size: 100%;
  width: fit-content;
}

<div class="containers">
  <div class="yellow-container">Notice for External Uses</div>
  <div class="blue-container"> If you are an external user who works with the state organization within the Commonwealth of Massachusetts and needs to exchange files, please contact your agency to request access.</div>
</div>

answered Oct 17 '22 at 13:35

manjiro sano

784
3
15

Thanks lot, is there any way to make the text two lines instead of one ? – Majdoubi Bostoni Oct 17 '22 at 13:53
@MajdoubiBostoni You can give it a fix width (a specific number) to meet your requirements. – manjiro sano Oct 17 '22 at 13:54
Thank you Sano, I did not find fix-wdth in css . – Majdoubi Bostoni Oct 17 '22 at 14:05
@MajdoubiBostoni I believe that what you want is to give a specific width that will make the div force the text to be in 2 lines. You can test it, and look for the exact value that will make it have 2 lines. – manjiro sano Oct 17 '22 at 14:22
@MajdoubiBostoni I believe that what you want is to give a specific width that will make the div force the text to be in 2 lines. You can test it, and look for the exact value that will make it have 2 lines. – manjiro sano Oct 17 '22 at 14:31

How to center a div like this image?

2 Answers2