CODEWITHSUNDEEP
htmlcss-tables
megaprimatus
megaprimatus

Reputation: 83

The middle cell in CSS table is not centered properly

Why the middle cell is not centered when the screen is wide?

I've tried to center almost everithing in ther but still cannot see the results I need.

e

Here is a link: http://edm-norway.com/4d

Upvotes: 0

Views: 399

Answers (4)

Razvan Zamfir
Razvan Zamfir

Reputation: 4686

Use a grid-based CSS framework, like Bootstrap 4:

<div class="container-fluid grid">
  <div class="row">
    <div class="col-sm-4 column">
      <a href="http://edm-norway.com/4d/logos">our services</a>
    </div>
    <div class="col-sm-4 column">
      <a href="http://mechanisms.club">our project</a></div>
    <div class="col-sm-4 column">
      <a href="http://ecofarm.technology">our startup</a>
    </div>
  </div>
</div>

<div class="footer">a picture is worth a thousand words
</div>

See the result I got here. As you can see, on extra small screen resolutions, the blocks stack. You won't be able to stack table cells or headers.

UPDATE:

Your Header section should be:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <style>
    body {
      background: #333333ff;
      font-family: 'Poiret One', cursive;
      font-size: 25px;
    }

    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 240px;
      height: auto;
    }

    .footer {
      position: fixed;
      left: 0;
      bottom: 0px;
      width: 100%;
      text-align: center;
      color: #f2f2f2ff;
      font-size: 20px;
      background-color: #4a4a4aff;
      padding: 10px;
    }

    a,
    a:hover {
      color: #f2f2f2ff;
      text-decoration: none;
    }

    .grid .column {
      font-weight: normal;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    @media (min-width: 576px) {
      .grid .column {
        height: 100px;
      }
    }

  </style>
</head>

Upvotes: 0

Dalton Whyte
Dalton Whyte

Reputation: 717

The table and its cells are all centered. It seems you are trying to align the middle cell with the logo above, I would suggest you move the logo to the left manually, using margin:-10px, if this is what you want.

As a test trying shrinking your browser window, you would see the middle cell align at some point and loose alignment.

Upvotes: 0

omid
omid

Reputation: 24

you can give anyone with:33.33

Upvotes: 1

Tharaka Nilupul Dharmabandu
Tharaka Nilupul Dharmabandu

Reputation: 386

table cell change width with text size. You have to set equal width to table cells

th {
    font-weight: normal;
    width: 33.33%;
}

Upvotes: 0

Related Questions