Попытка выровнять текст по вертикали с помощью CSS (flexbox) - PullRequest
Новая
       43

Попытка выровнять текст по вертикали с помощью CSS (flexbox)

0 голосов
/ 04 октября 2019

Я всегда застреваю при выравнивании текста по вертикали, сегодня у меня есть действительно массивный блок о том, как добиться этого в карусели, которую мне нужно стилизовать.

Как получить текст и стрелки ввертикальная середина каждого элемента?

Вот мой код: 

#page {
  text-align:center;
  font-family: sans-serif;
  
    .case {
      width: 200px;
      border-radius: 0.3em;
      color: white;
      background-color: grey;
      margin: 0 auto;


              app-dashboard-case {
                  width: 100%;
              }

              .selector {
                      padding: 0;
                      display: flex;

                      .selector-previous, .selector-next {
                      border-radius: 1rem 0 0 1rem;
                      max-width: 1rem;
                      cursor: pointer;
                      justify-content: center;
                      padding: 0;
                      align-content: center;
                      display: flex;
                      flex-direction: column;
                        
                        &:hover {
                          background-color: darken(grey,10%);
                        }

                          fa-icon {
                              font-size: 3em;
                          }
                      }

                      .selector-next {
                          border-radius: 0 1rem 1rem 0;
                      }

                .selector-middle {
                  padding: 10px;
                  text-align: left;
                  justify-content: center;
                      align-content: center;
                      display: flex;
                      flex-direction: column;
                     div {margin-bottom: 0em;}
                }
          }
  }
}
<head>
  <script src="https://kit.fontawesome.com/30b81c4dfc.js" crossorigin="anonymous"></script>
</head>

<body>
  <div id="page">
    <div class="row case">
      <app-dashboard-case>
        <div class="col case-container">
          <div class="row selector">
            <div class="col case selector-previous">
              <fa-icon class="ng-fa-icon" icon="caret-left">
                <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-left" class="svg-inline--fa fa-caret-left fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>
              </fa-icon>
            </div>

            <div class="col case selector-middle">
              <div><label>Ref: </label>OurRefNo1234</div>
              <div><label>Name: </label>A N Other</div>
              <div><label>Date of Birth: </label>01/02/2000</div>
            </div>

            <div class="col case selector-next text-right">
              <fa-icon class="ng-fa-icon" icon="caret-right">
                <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-inline--fa fa-caret-right fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>
              </fa-icon>
            </div>
          </div>

        </div>

      </app-dashboard-case>

    </div>
  </div>
</body>

Ответы [ 2 ]

0 голосов
/ 04 октября 2019

Вам просто нужно изменить раздел .selector-middle следующим образом.

Пожалуйста, проверьте это здесь: 

#page {
  text-align: center;
  font-family: sans-serif;
  .case {
    width: 200px;
    border-radius: 0.3em;
    color: white;
    background-color: grey;
    margin: 0 auto;
    app-dashboard-case {
      width: 100%;
    }
    .selector {
      padding: 0;
      display: flex;
      .selector-previous,
      .selector-next {
        border-radius: 1rem 0 0 1rem;
        max-width: 1rem;
        cursor: pointer;
        justify-content: center;
        padding: 0;
        align-content: center;
        display: flex;
        flex-direction: column;
        &:hover {
          background-color: darken(grey, 10%);
        }
        fa-icon {
          font-size: 3em;
        }
      }
      .selector-next {
        border-radius: 0 1rem 1rem 0;
      }
      .selector-middle {
        padding: 10px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        div {
          margin-bottom: 0.5em;
        }
      }
    }
  }
}
<head>
  <script src="https://kit.fontawesome.com/30b81c4dfc.js" crossorigin="anonymous"></script>
</head>

<body>
  <div id="page">
    <div class="row case">
      <app-dashboard-case>
        <div class="col case-container">
          <div class="row selector">
            <div class="col case selector-previous">
              <fa-icon class="ng-fa-icon" icon="caret-left">
                <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-left" class="svg-inline--fa fa-caret-left fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>
              </fa-icon>
            </div>

            <div class="col case selector-middle">
              <div><label>Ref: </label>OurRefNo1234</div>
              <div><label>Name: </label>A N Other</div>
              <div><label>Date of Birth: </label>01/02/2000</div>
            </div>

            <div class="col case selector-next text-right">
              <fa-icon class="ng-fa-icon" icon="caret-right">
                <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-inline--fa fa-caret-right fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>
              </fa-icon>
            </div>
          </div>

        </div>

      </app-dashboard-case>

    </div>
  </div>
</body>
0 голосов
/ 04 октября 2019

изменить стиль для ".selector-previous, .selector-next" 

#page {
  text-align:center;
  font-family: sans-serif;
  
    .case {
      width: 200px;
      border-radius: 0.3em;
      color: white;
      background-color: grey;
      margin: 0 auto;


              app-dashboard-case {
                  width: 100%;
              }

              .selector {
                      padding: 0;
                      display: flex;

.selector-previous, .selector-next {
                      border-radius: 1rem 0 0 1rem;
                      max-width: 1rem;
                      cursor: pointer;
                      justify-content: center;
                      padding: 0;
                      align-content: center;
                      display: flex;
                      flex-direction: column;
                        
                        &:hover {
                          background-color: darken(grey,10%);
                        }

                          fa-icon {
                              font-size: 3em;
                          }
                      }

                      .selector-next {
                          border-radius: 0 1rem 1rem 0;
                      }

                .selector-middle {
                  padding: 10px;
                  text-align: left;
                  justify-content: center;
                      align-content: center;
                      display: flex;
                      flex-direction: column;
                     div {margin-bottom: 0em;}
                }
          }
  }
}
<head>
  <script src="https://kit.fontawesome.com/30b81c4dfc.js" crossorigin="anonymous"></script>
</head>

<body>
  <div id="page">
    <div class="row case">
      <app-dashboard-case>
        <div class="col case-container">
          <div class="row selector">
            <div class="col case selector-previous">
              <fa-icon class="ng-fa-icon" icon="caret-left">
                <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-left" class="svg-inline--fa fa-caret-left fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>
              </fa-icon>
            </div>

            <div class="col case selector-middle">
              <div><label>Ref: </label>OurRefNo1234</div>
              <div><label>Name: </label>A N Other</div>
              <div><label>Date of Birth: </label>01/02/2000</div>
            </div>

            <div class="col case selector-next text-right">
              <fa-icon class="ng-fa-icon" icon="caret-right">
                <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-inline--fa fa-caret-right fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>
              </fa-icon>
            </div>
          </div>

        </div>

      </app-dashboard-case>

    </div>
  </div>
</body>
...