вертикально выровненные элементы на противоположных сторонах - PullRequest
Новая
       7

вертикально выровненные элементы на противоположных сторонах

0 голосов
/ 02 июля 2018

Мы встраиваем урезанную версию нашего веб-приложения в стороннюю страницу в виде фрейма. Я хотел бы иметь нижнюю «панель инструментов», содержащую 2 ссылки, одна из которых представляет собой обычный текст, а другая - логотип нашей компании с предваряющим текстом. Мне бы хотелось, чтобы две ссылки были в противоположных углах и были выровнены по вертикали к середине содержащейся панели инструментов div. Используя этот подход вот что я получил до сих пор Fiddle : 

<div id="main-app"></div>

<div id="my-footer">
  <span id="full-link" class="assert-position"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </span> <div id="filler" class="assert-position"></div> Powered by
  <a href="http://www.company-landing-page.co.uk" target="_blank" class="assert-position"> <img src="/images/my-company_logo.png"/></a>
</div>
<style>
     *{
       margin: 0;
       padding: 0;
     }

      html, body {
        height: 100%;
      }

      #main-app {
          height: 90%;
          width: 100%;
      }

      #my-footer {
        height: 10%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        float: left;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      .assert-position{
        display: inline-block;
        vertical-align: middle;
      }

      #full-link a:visited{
        color: #FFF
       }
</style>

Проблема в том, что все, что я делаю, чтобы попытаться получить ссылку слева вертикально выровненной правильно (как текст с изображением), либо ничего не делает, либо разрушает горизонтальное выравнивание. Поскольку я не контролирую и даже не знаю, насколько большим будет встроенный iframe, все, что касается фиксированного числа пикселей (скажем, с помощью position: absolute), является правильным. Я уверен, что это должно быть легко, но, будучи внутренним разработчиком, я рву на себе волосы. Кроме того, я бы предпочел избегать использования сторонних библиотек, таких как начальная загрузка, так как мое основное приложение не использует их, и я не хочу, чтобы какие-либо глобальные настройки из моих существующих зависимостей переопределялись.

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

ДЕМО: http://jsfiddle.net/kbjycez2/68/

Чтобы выровнять ссылки по центру по вертикали, необходимо указать высоту строки для элемента # my-footer .

Я использовал flex-модель для выравнивания ваших ссылок слева и справа.

Вам может подойти следующий фрагмент: 

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#main-app {
  height: 90%;
  width: 100%;
}

#my-footer {
  height: 10%;
  width: 100%;
  background-color: #0f0f0f;
  color: #FFF;
  display: flex;
  font-family: Tahoma, Arial, "sans-serif";
  justify-content: space-between;
  line-height: calc(10vh);
}

#my-footer img {
  vertical-align: middle;
}

#full-link a:visited {
  color: #FFF
}
<div id="main-app"></div>

<div id="my-footer">
  <div>
    <a href="https://url.to.webapp">View Full Size</a>
  </div>
  <div>
    <span>Powered By </span>
    <a href="http://www.company-landing-page.co.uk"><img src="/images/my-company_logo.png" /></a>
  </div>
</div>
0 голосов
/ 02 июля 2018

Вертикальное выравнивание - это боль. Эта техника, описанная в ссылке, кажется мне сложной.

Что я делаю, так это то, что у меня есть div, который абсолютно позиционирован со следующими значениями: 

{
    top:50%;
    transform:translateY(-50%);
}

Чтобы это работало, мой футер должен иметь position:relative.

Преимущество этого в том, что вам не нужен div "filler" или что-то в этом роде. В решении, которое я здесь показываю, я создал класс «vAlign», который имеет вышеуказанные атрибуты, затем я просто добавил «left: 5px» и «right: 5px» в css для каждого элемента нижнего колонтитула (я создал) company-link "id для части" Powered by "), исключая необходимость использования float. Я также увеличил высоту нижнего колонтитула, чтобы сделать вертикальное выравнивание более очевидным. 

     *{
       margin: 0;
       padding: 0;
     }

      html, body {
        height: 100%;
      }

      #main-app {
          height: 70%;
          width: 100%;
      }

      #my-footer {
        position:relative;
        height: 30%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        left:5px;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      #full-link a:visited{
        color: #FFF
       }
       
      #companyLink {
        right:5px;
      }
       
      .v-align {
         position:absolute;
         top:50%;
         transform:translateY(-50%);
      }
<div id="main-app"></div>

<div id="my-footer">

  <div id="full-link" class="v-align"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </div>
  
  <div id="companyLink" class="v-align">Powered by <a href="http://www.company-landing-page.co.uk" target="_blank"><img src="/images/my-company_logo.png"/></a><div>
  
</div>
...