Вертикальный отступ у блока

285

26 ноября 2016, 18:41

Проблема такая. Блок с классом .more будто "застыл" в вертикальном пространстве. Я не могу его сместить выше, как мне нужно (что бы он был вертикально по середине основного блока). Подскажите, в чем загвоздка

.event { 
  min-height: 1px; 
} 
.date { 
  float: left; 
  margin-right: 20px; 
} 
.date span { 
  display: block; 
  text-transform: uppercase; 
  color: #668333; 
  font-family: 'ProximaNova-Bold'; 
  font-size: 1.3em; 
} 
.date .number { 
  font-size: 2.5em; 
  line-height: 1; 
} 
.date-desc h4 { 
  color: #e67d6c; 
  line-height: 1; 
} 
.date-desc .date-time { 
  line-height: 1; 
} 
.date-time .day { 
  font-weight: bold; 
  padding-right: 5px; 
  border-right: 1px solid #000; 
} 
.more { 
  margin-left: 90%; 
  margin-bottom: 20px; 
}

<div class="events"> 
  <h3>upcoming events</h3> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
</div>

Answer 1

Задайте блоку position: relative; top: -50px; и смещайте на сколько нужно по вертикали изменяя значение top

.event { 
  min-height: 1px; 
} 
.date { 
  float: left; 
  margin-right: 20px; 
} 
.date span { 
  display: block; 
  text-transform: uppercase; 
  color: #668333; 
  font-family: 'ProximaNova-Bold'; 
  font-size: 1.3em; 
} 
.date .number { 
  font-size: 2.5em; 
  line-height: 1; 
} 
.date-desc h4 { 
  color: #e67d6c; 
  line-height: 1; 
} 
.date-desc .date-time { 
  line-height: 1; 
} 
.date-time .day { 
  font-weight: bold; 
  padding-right: 5px; 
  border-right: 1px solid #000; 
} 
.more { 
  margin-left: 90%; 
  margin-bottom: 20px; 
  position: relative; 
  top: -50px; 
}

<div class="events"> 
  <h3>upcoming events</h3> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
</div>

Answer 2

.event { 
  display: table; 
	width: 100%; 
	clear:both; 
} 
.date { 
  float: left; 
  margin-right: 20px; 
} 
.date span { 
  display: block; 
  text-transform: uppercase; 
  color: #668333; 
  font-family: 'ProximaNova-Bold'; 
  font-size: 1.3em; 
} 
.date .number { 
  font-size: 2.5em; 
  line-height: 1; 
} 
.date-desc h4 { 
  color: #e67d6c; 
  line-height: 1; 
} 
.date-desc{ 
	float:left; 
} 
.date-desc .date-time { 
  line-height: 1; 
} 
.date-time .day { 
  font-weight: bold; 
  padding-right: 5px; 
  border-right: 1px solid #000; 
} 
.more { 
  margin-left: 80%; 
  margin-bottom: 20px; 
}

<div class="events"> 
  <h3>upcoming events</h3> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span>  
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
  <div class="event"> 
    <div class="date"> 
      <span class="number">20</span> 
      <span class="month">july</span> 
    </div> 
    <div class="date-desc"> 
      <h4>family sunday</h4> 
      <div class="date-time"> 
        <span class="day">Sunday</span> 
        <span class="time">9.30am</span> 
      </div> 
    </div> 
    <div class="more"> 
      <a href="">MORE</a> 
    </div> 
  </div> 
</div>

Попробуй так, и выровняй как душе угодно. Правда с line-height ты что-то намудрил

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Запретить скролл вверх

Существует ли возможность с помощью js/jquery сделать так, чтобы пользователь мог прокручивать страницу вниз, а вверх не мог ? Если можно, то подскажите,...

413

CSS

Как скролить фиксированный блок, если он не влезает на экран?

Собственно есть мобильное меню с position: fixed, в нем много пунктов меню, которые не влезают на экран моб телефона, но при попытке проскрулить вниз,...

458

CSS

Кликабельность кнопок в новом окне

При открытии нового окна span становится не кликабельнымКод открытия нового окна

273

CSS

Как выравнять все ячейки по центру таблицы кроме первого ряда таблицы на css

Как выравнять все ячейки по центру таблицы (кроме первого ряда таблицы) на css?

310