1

Не выравнивается ссылка по центру ячейки таблицы. Пробовал добавлять display:inline-block, text-align:center, vertical-align: middle. Пробовал через flex.

Так с таблицей вообще непонятно что происходит, подскажите как решить проблему? Код прилагается.

PS в редакторе stackowerflow почему-то все нормально вроде, а локально кнопка прилипает к левому верхнему краю.

@import "reset.css";


html{
    font-size: 0.625em;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

table {
    border-collapse: collapse;
    font-size: 3rem;
    border: 29px solid hsl(219, 27%, 31%);
    }

    .border-right {
        border-right: 1px solid hsl(0, 0%, 81%);;
        }
    .background-light{
        background: #F2F2F2;
    }
    .background-grey{
        background: #E3E3E3;
    }
    .left-column{
        width: 31.3rem;
    }
    .header{
        height: 15.9rem;
    }
    .basic-columns{
        width: 28rem;
        height: 7.2rem;

    }
    .button-columns{
        width: 28rem;
        height: 12rem;

    }

     .td-basic{
        text-align: center;
        vertical-align: middle;
        text-transform: uppercase;
        width: 28rem;
        height: 7.2rem;
        font-family: Arimo, sans-serif;
        font-size: 1.6rem;
        color: hsl(0, 0%, 28%);
    } 

    .icons{
        margin-right: 1rem;
        font-family: FontAwesome;
        font-size: 2.2rem;
        color: hsl(0, 0%, 52%);
    }
      /* .flex-button{
        display: inline-flex;
        align-items: center;
        justify-content: space-around;
    }    */
    .button{
        display: inline-block;
        font-family: Arimo, sans-serif;
        font-weight: bold;
        font-size: 1.6rem;
        color: #fff;
        /* line-height: 2.8rem; */
        padding: 1.3rem 4.6rem 0.9rem 4.6rem;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 0.5rem;
        box-shadow: 0 0.2rem 0.3rem #ccc;
    }

    .dark-btn{
        background-color: hsl(0, 0%, 28%);
        border-bottom: 0.7rem solid hsl(0, 0%, 25%);
    }

    .green-btn{
        background-color: hsl(84, 60%, 48%);
        border-bottom: 0.7rem solid hsl(84, 64%, 42%);
    }

    .red-btn{
        background-color: hsl(356, 85%, 62%);
        border-bottom: 0.7rem solid hsl(356, 72%, 55%);
    }

    .blue-btn{
        background-color: hsl(178, 60%, 31%);
        border-bottom: 0.7rem solid hsl(177, 68%, 27%);
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
    <title>Prising Table</title>
</head>
<body>
  
    <table>
        <!-- <caption>Test table for PE</caption> -->
        <colgroup>
            <col span="2" class="own-items">
            <col class="another-items">
        </colgroup>
        <thead>
        <tr>
            <th class="left-column header border-right">Заголовок 1</th>
            <th class="basic-columns header border-right">Standart</th>
            <th class="basic-columns header border-right">Ultimate</th>
            <th class="basic-columns header">Premium</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td class="flex-button left-column border-right"><a href="#void" class="button dark-btn">Contact Us</a></td>
            <td class="button-columns border-right"><a href="#void" class="button green-btn">Buy now</a></td>
            <td class="button-columns border-right"><a href="#void" class="button red-btn">Buy now</a></td>
            <td class="button-columns"><a href="#void" class="button blue-btn">Buy now</a></td>
        </tr>
        </tfoot>
        <tbody>
        <tr class="background-light">
            <td class="left-column td-basic border-right" ><i class="fas fa-archive icons"></i>Storage</td>
            <td class="basic-columns td-basic border-right" >500GB Storage</td>
            <td class="basic-columns td-basic border-right" >1000GB Storage</td>
            <td class="basic-columns td-basic" >2000GB Storage</td>
        </tr>
        <tr class="background-grey">
            <td class="left-column td-basic border-right"><i class="fas fa-cloud-upload-alt icons"></i>Bandwith</td>
            <td colspan="2" class="basic-columns td-basic border-right">Limited</td>
            <td class="basic-columns td-basic">Unlimited</td>
         </tr>
        <tr>
            <td class="left-column td-basic border-right"><i class="fas fa-envelope icons"></i>Email</td>
            <td class="basic-columns td-basic border-right">25 emails</td>
            <td class="basic-columns td-basic border-right">45 emails</td>
            <td class="basic-columns td-basic">65 emails</td>
        </tr>
        <tr class="background-grey">
            <td class="left-column td-basic border-right"><i class="far fa-life-ring icons"></i>Support</td>
            <td colspan="3" class="basic-columns td-basic">24/7 support</td>
        </tr>
        <tr>
            <td class="left-column td-basic border-right"><i class="fas fa-cube icons"></i>Product</td>
            <td class="basic-columns td-basic border-right">20 products</td>
            <td class="basic-columns td-basic border-right">30 products</td>
            <td class="basic-columns td-basic">60 products</td>
        </tr>
        <tr class="background-grey">
            <td class="left-column td-basic border-right"><i class="fas fa-users icons"></i>Users</td>
            <td class="basic-columns td-basic border-right">1 users</td>
            <td class="basic-columns td-basic border-right">10 users</td>
            <td class="basic-columns td-basic">15 users</td>
        </tr>
        </tbody>
        </table>
    </table>
    
</body>
</html>

5

2 ответа 2

2

Если я правильно понимаю задачу, то для .button-columns нужно условие text-align: center;

Однако, так как у вас все содержимое в таблице по центру, то лучше так:

table>td { text-align: center; }

Только таблице присвоить свой class.

@import "reset.css";
html {
  font-size: 0.625em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  font-size: 3rem;
  border: 29px solid hsl(219, 27%, 31%);
}

.border-right {
  border-right: 1px solid hsl(0, 0%, 81%);
  ;
}

.background-light {
  background: #F2F2F2;
}

.background-grey {
  background: #E3E3E3;
}

.left-column {
  width: 31.3rem;
}

.header {
  height: 15.9rem;
}

.basic-columns {
  width: 28rem;
  height: 7.2rem;
}

.button-columns {
  width: 28rem;
  height: 12rem;
  text-align: center;
}

.td-basic {
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  width: 28rem;
  height: 7.2rem;
  font-family: Arimo, sans-serif;
  font-size: 1.6rem;
  color: hsl(0, 0%, 28%);
}

.icons {
  margin-right: 1rem;
  font-family: FontAwesome;
  font-size: 2.2rem;
  color: hsl(0, 0%, 52%);
}


/* .flex-button{
        display: inline-flex;
        align-items: center;
        justify-content: space-around;
    }    */

.button {
  display: inline-block;
  font-family: Arimo, sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: #fff;
  /* line-height: 2.8rem; */
  padding: 1.3rem 4.6rem 0.9rem 4.6rem;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 0.3rem #ccc;
}

.dark-btn {
  background-color: hsl(0, 0%, 28%);
  border-bottom: 0.7rem solid hsl(0, 0%, 25%);
}

.green-btn {
  background-color: hsl(84, 60%, 48%);
  border-bottom: 0.7rem solid hsl(84, 64%, 42%);
}

.red-btn {
  background-color: hsl(356, 85%, 62%);
  border-bottom: 0.7rem solid hsl(356, 72%, 55%);
}

.blue-btn {
  background-color: hsl(178, 60%, 31%);
  border-bottom: 0.7rem solid hsl(177, 68%, 27%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/main.css">
  <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
  <title>Prising Table</title>
</head>

<body>

  <table>
    <!-- <caption>Test table for PE</caption> -->
    <colgroup>
      <col span="2" class="own-items">
      <col class="another-items">
    </colgroup>
    <thead>
      <tr>
        <th class="left-column header border-right">Заголовок 1</th>
        <th class="basic-columns header border-right">Standart</th>
        <th class="basic-columns header border-right">Ultimate</th>
        <th class="basic-columns header">Premium</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td class="flex-button left-column border-right button-columns"><a href="#void" class="button dark-btn">Contact Us</a></td>
        <td class="button-columns border-right"><a href="#void" class="button green-btn">Buy now</a></td>
        <td class="button-columns border-right"><a href="#void" class="button red-btn">Buy now</a></td>
        <td class="button-columns"><a href="#void" class="button blue-btn">Buy now</a></td>
      </tr>
    </tfoot>
    <tbody>
      <tr class="background-light">
        <td class="left-column td-basic border-right"><i class="fas fa-archive icons"></i>Storage</td>
        <td class="basic-columns td-basic border-right">500GB Storage</td>
        <td class="basic-columns td-basic border-right">1000GB Storage</td>
        <td class="basic-columns td-basic">2000GB Storage</td>
      </tr>
      <tr class="background-grey">
        <td class="left-column td-basic border-right"><i class="fas fa-cloud-upload-alt icons"></i>Bandwith</td>
        <td colspan="2" class="basic-columns td-basic border-right">Limited</td>
        <td class="basic-columns td-basic">Unlimited</td>
      </tr>
      <tr>
        <td class="left-column td-basic border-right"><i class="fas fa-envelope icons"></i>Email</td>
        <td class="basic-columns td-basic border-right">25 emails</td>
        <td class="basic-columns td-basic border-right">45 emails</td>
        <td class="basic-columns td-basic">65 emails</td>
      </tr>
      <tr class="background-grey">
        <td class="left-column td-basic border-right"><i class="far fa-life-ring icons"></i>Support</td>
        <td colspan="3" class="basic-columns td-basic">24/7 support</td>
      </tr>
      <tr>
        <td class="left-column td-basic border-right"><i class="fas fa-cube icons"></i>Product</td>
        <td class="basic-columns td-basic border-right">20 products</td>
        <td class="basic-columns td-basic border-right">30 products</td>
        <td class="basic-columns td-basic">60 products</td>
      </tr>
      <tr class="background-grey">
        <td class="left-column td-basic border-right"><i class="fas fa-users icons"></i>Users</td>
        <td class="basic-columns td-basic border-right">1 users</td>
        <td class="basic-columns td-basic border-right">10 users</td>
        <td class="basic-columns td-basic">15 users</td>
      </tr>
    </tbody>
  </table>
  </table>

</body>

</html>

1

Чтобы выровнять inline-block по центру ячейки достаточно написать для ячейки text-align: center;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.