Question 357779 in Html Question posted in
Some basic documentation can be found here.

Html – trying to figure out how to set up a centered text box

extremely new to html and css, started literally days ago, im trying to figure out how to put a text box in the center of my site with the text aligned against the left of the box with a short title and space for the date and time just using h1, then h3, then h2. Id also like it to have its own separate background than the rest of the site. I would hope it is responsive as well. similar to this image

so far ive used border to get this, but the issue is the text isnt aligned to the left, and there is no difference in background. i understand that the top border of the desired image is a png, i would also like to know how to get that done if possible

Tags:

2

Answers


  1. 0

    To align your text to the left within the box, you can use the CSS text-align property. This allows you to specify the alignment of text. For aligning text to the left, simply use:

    h1 {
text-align: left;
}

    You can learn more about the text-align property and its values here: MDN Web Docs on text-align.

    Regarding the border that resembles the image you mentioned, there are several approaches you can take:

    1. Box Shadow: You can create sophisticated border effects using the box-shadow property. It allows for a flexible way to add shadow
      effects around an element’s frame, which can simulate borders. A
      great resource to experiment with and learn about box-shadow is CSS
      Matic Box Shadow Generator      .

    2. Border Image: Another method is using the border-image property. This CSS feature enables you to use an image as the border of an
      element. It’s quite versatile and can be used to achieve unique
      border designs, including the one you described. For a comprehensive
      guide and examples, visit MDN Web Docs on border-image.

    3. Custom Element or Pseudo-Element: Lastly, you can create a custom decorative border by using a custom element (such as a div)
      or a pseudo-element (like ::before). This element can then be styled
      and positioned at the top of your message block, with its width set
      to 100% and a custom background applied to simulate the top border
      design you’re after.

    Login or Signup to reply.
  2. 0

    You can simply, apply a CSS property called text-align to make the text to the left. But make sure the container where you have the text has to be of width 100%.

    enter image description here

    Here is the HTML I used.

    <body>
   <div class="container">
      <div class="modal">
        <h2>Heading</h2>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text 
        </p>
      </div>
   </div>
</body>

    Here are the styles

    <style>
      body {
        font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
          "Lucida Sans", Arial, sans-serif;
      }
      .container {
        width: 100vw;
        height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
      }

      .modal {
        width: 500px;
        height: 200px;
        padding: 1.5rem;
        background-color: aqua;
        border: 1px solid black;
        border-top: 15px solid black;

        display: flex;
        flex-direction: column;
        text-align: left;
      }
</style>

    To get the boundaries of each box (tag/element in HTML ), you can use a temporary border around all of them by adding.

    * {
   border: 1px solid black;
}

    All the HTML tags work on BOX-Model. I also wanted to share some learning resources with you to help you out.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search