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

Html – How can I make this div centered without also centering the text? I want it to be left aligned

I’m a beginner in HTML/CSS and I’m stumbling my way through building my own Neocities site. I was able to get the div centered by putting above and below it, but (understandably) the text is also centered.

This is my code:

<center>
  <div style="width:1000px;height:150px;border:1px solid blue;overflow:scroll;padding:15px 25px 15px 25px;background-color:#A2E4B8;color:#000000;scrollbar-base-color:#DEBB07;box-shadow: 7px 7px rgb(0, 0, 0, 0.8);">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id
    venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus
    magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.
  </div>
</center>

A screenshot of my Neocities HTML code

I tried using text-align: left; but that didn’t yield results. I am sure I’m doing something wrong, but I’m feeling quite lost as to what that is.

Tags:

3

Answers


  1. 0

    Set the left and right margins to auto.

    .d1 {
  margin: 0 auto;
  width: 50%;
  height: 150px;
  border: 1px solid blue;
  overflow: scroll;
  padding: 15px 25px 15px 25px;
  background-color: #A2E4B8;
  color: #000000;
  scrollbar-base-color: #DEBB07;
  box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
}
    <div class="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.</div>

    Further reading here.

    Login or Signup to reply.
  2. 0

    You should avoid using the "center" tag as it’s deprecated in HTML5. Instead, use CSS to center the div container.

    I’ve added CSS styling directly within the "head" section using the "style" tag, but you can use it in an external css file.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center div with flex</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    .content-container {
      width: 1000px;
      height: 150px;
      border: 1px solid blue;
      overflow: scroll;
      padding: 15px 25px;
      background-color: #A2E4B8;
      color: #000000;
      scrollbar-base-color: #DEBB07;
      box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
      text-align: left; /* Align the text to the left */
    }
  </style>
</head>
<body>
  <div class="content-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.
  </div>
</body>
</html>

    I’ve used flexbox on the body to center the content both horizontally and vertically. The div element got a classname ".content-container" and by using the "text-align: left;" it aligns the text within the "div" to the left while keeping the entire "div" centered on the page.

    Or if you dont want to style the body element, here is an alternative method:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center div with margin</title>
  <style>
    .content-container {
      margin: 0 auto;
      width: 1000px;
      height: 150px;
      border: 1px solid blue;
      overflow: scroll;
      padding: 15px 25px;
      background-color: #A2E4B8;
      color: #000000;
      scrollbar-base-color: #DEBB07;
      box-shadow: 7px 7px rgb(0, 0, 0, 0.8);
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="content-container">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Fringilla urna porttitor rhoncus dolor purus. Id venenatis a condimentum vitae. Scelerisque in dictum non consectetur a erat nam. Ultrices eros in cursus turpis. Facilisi cras fermentum odio eu feugiat. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Amet luctus venenatis lectus magna. Nibh nisl condimentum id venenatis a. Nec dui nunc mattis enim ut tellus. At risus viverra adipiscing at in tellus integer. Placerat vestibulum lectus mauris ultrices. Semper viverra nam libero justo laoreet.
  </div>
</body>
</html>

    Here the div with the classname ".content-container" is centered horizontally by using "margin: 0 auto;" and the text in it aligned left by using the "text-align: left;" property.

    Login or Signup to reply.
  3. 0

    Try text-align:left !important;

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

Back To Top
Search