The HTML div is not aligned in the center even when using flexbox

After creating a list within a centered flex div, it seems that the list is not aligning properly. I used flex on the list-div2 and the translate rule in the parent's middle-text div, but it still doesn't look centered as expected.
Can anyone provide guidance on why it's not being centered correctly?

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}
<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>

htmlcssflexbox

Answer №1

It's all due to the default padding and margin that browsers apply to the ul tag.

For instance:

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}

.items-list2 {
  margin: 0;
  padding: 0;
}
<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>

Answer №2

There is padding on the left side in the user agent stylesheet. To remove it, you can override the style by using ul{padding-left: 0}

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

Answer №3

To ensure proper formatting, apply padding: 0; to your ul

ul.items-list2 {
  padding: 0;
}

According to the W3C specifications, ul elements have a default margin of 40px, but different browsers may override this styling. It is recommended to normalize margins and paddings for consistency.

https://i.sstatic.net/phuIf.png

body {
  margin: 0;
}
ul.items-list2 {
  padding: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}
<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

javascriptjqueryhtml

Issue with interactive rows in a table ( Rails Version 4 )

I am encountering an issue with a table that is linked to a customer show page _table.html.erb <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th width="50"><%= sort_link ...

htmlcssruby-on-rails

Centering items within grid columns for optimal alignment

I have successfully designed a contact form using a CSS grid layout that features 4 input fields and a submit button spanning across 2 columns. Two of the input fields take up 1fr of space each, while the remaining two are 1/3 wide. My challenge lies in c ...

htmlcsscss-grid

Help needed with using Regex to restrict the number of alphabetical characters allowed

Struggling with configuring RegEx's. Seeking guidance to create a RegEx with the following criteria: Only allow numbers (0-9) Allow a period (.), negative sign (-), plus sign (+), dollar sign ($), and comma (,) Do not permit any alphabetic characte ...

javascripthtmlregexvisual-studio

PHP: Syntax error: unexpected empty string (T_ENCAPSED_AND_WHITESPACE)

When trying to retrieve values from a SQL database and set them as unique options for Radio buttons, I am encountering an error. I believe the issue lies in how I am passing PHP code within the value parameter. Can someone please provide guidance on how to ...

phphtmlsql

Choose tag using position in a sequence

I am working on updating the label text "E-mail" to say "User Name" in this HTML markup. The only tool I have access to for this task is jQuery. <div class="foo" style="border:1px solid #444"> <span class="field-with-fancyplaceholde ...

jquerycssjquery-selectors

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

javascripthtmlcss

Retrieve a targeted tag from the API snippet

I need to extract the IMG SRC tag from the given code: <pod title="Scientific name" scanner="Data" id="ScientificName:SpeciesData" position="200" error="false" numsubpods="1"> <subpod title=""> <plaintext>Canis lupus familiaris</plain ...

phphtmlimagetagssrc

What is the best way to create a layout for Flexbox project boxes with three boxes per row?

My project cards are displaying in a single horizontal line and expanding infinitely to the right, rather than appearing in rows of three as intended. This causes them to extend outside the visible area in a long horizontal strip. See the issue in action ...

htmlcssflexbox

Having difficulties with my online form

Each page of my website features the following form: <section class="footer-one"> <form action="sendmail.php" method="post" onsubmit="return validateForm()"> <div> <div class="row half"> <div class="6u"> <input type="text ...

phphtml

A comprehensive guide on transferring user input onto a php text file

I am trying to implement a feature in my PHP code where the contents entered in a text box are uploaded to a text file. However, I only want them to be written if the string contains a specific pattern. Here is the modified PHP code: <?php $data = $_ ...

phphtmlformsuploadsubmit

How can one import files from an external CSS template in CakePHP 2.x?

I recently acquired an external HTML template that I purchased from a website called themeforest: https://i.sstatic.net/UIu6g.png The folder structure is as follows: base/ - css/ - fonts/ - images/ - img/ - js/ - index.html The template file Index.html ...

htmlcsstemplatescakephp

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui

Shades of Grey in Visual Studio Code

Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...

csslayoutvisual-studio-code

Failure to send chat form

I have been developing a PHP chat application and everything is working well. However, I am looking to implement AJAX in order to prevent the page from refreshing. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></s ...

phphtmlajax

After the video finishes playing, a black screen is displayed on the HTML 5 video

I'm facing an issue with a video loaded in the <video> tag. The video is set to play only once and doesn't loop. However, after the video finishes playing, it just displays a black screen. I've attempted to use the poster attribute, ...

htmlhtml5-video

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the f ...

javascripthtmlcss

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

javascriptangularhtmltypescriptangular-material

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

javascripthtml