Div has problems getting to center

Question

I have a simple file which is included in my main file to just display the PHP parameters

<div class="ann-flex">
  <div class="ann-item" onclick="modal1f()">
    <div class="ann-item" id="modal1t">
      <h2><?php echo $akt1n;?></h2>
      <h5><?php echo $akt1t;?></h5>
    </div>
    <div id="modal1" class="modal">
      <div class="modal-content">
        <div id="ann1pdf"></div> 
      </div>
    </div>
  </div>
</div>

CSS file:

#ann-flex {
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    position: static;
    -ms-user-select: none;
    user-select: none;
    margin-top: 20px;
}
.ann-item {
    width: 17em;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    padding-right: 5px;
}
.ann-item > h2 {
    text-align: center;
    font-size: larger;
    font-weight: normal; 
}
.ann-item > h5 {
    text-align: center;
    font-weight: normal; 
}
#ann1pdf,#ann2pdf,#ann3pdf {
    height: 400px;
    width: 100%;
}

The problem is, it won't center on a website

Photo of the site

and it really destroys the visual side of it, the function is the same

possibly see: [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) or [Centering in CSS Grid](https://stackoverflow.com/questions/45536537/centering-in-css-grid) — pilchard, Sep 02 '23 at 08:51

Mohammed Jhosawa · Accepted Answer · 2023-09-02T09:12:19.730

To select elements by their class attribute you need use '.' dot symbol in the CSS.

I think you're trying to select the class="ann-flex" with '#' symbol.

Quick fix to your problem is to change #ann-flex to .ann-flex and it may works for you.

.ann-flex {
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    position: static;
    -ms-user-select: none;
    user-select: none;
    margin-top: 20px;
}
.ann-item {
    width: 17em;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    display: inline-block;
    padding-right: 5px;
}
.ann-item > h2 {
    text-align: center;
    font-size: larger;
    font-weight: normal; 
}
.ann-item > h5 {
    text-align: center;
    font-weight: normal; 
}
#ann1pdf,#ann2pdf,#ann3pdf {
    height: 400px;
    width: 100%;
}

<div class="ann-flex">
  <div class="ann-item">
    <div class="ann-item" id="modal1t">
      <h2>My favourite Marvel Hero!</h2>
      <h5>Rocket</h5>
    </div>
    <div id="modal1" class="modal">
      <div class="modal-content">
        <div id="ann1pdf"></div> 
      </div>
    </div>
  </div>
</div>

Follow the best practices to center the <div> element in CSS, commonly used methods for centering a both horizontally and vertically:

Using Flexbox: Flexbox: center horizontally and vertically
Using CSS Grid: Centering in CSS Grid
Using Absolute Positioning: How to center an element horizontally and vertically

Div has problems getting to center

1 Answers1