выравнивание HTML-элементов и классов [дубликаты]

Question

выравнивание HTML-элементов и классов [дубликаты]

0

Я играл с divs и классами, чтобы попытаться получить текст на моем веб-сайте, чтобы правильно подойти. В настоящее время у меня есть 2 класса, которые я хочу выровнять рядом друг с другом, чтобы сделать 2 столбца. Скорее всего, добавьте код, но в основном, правый столбец, текстовый столбец, не будут хорошо выравниваться на мобильных устройствах. Я хочу, чтобы в этом столбце было возможно несколько строк текста, который вертикально центрируется до середины строки, в настоящее время Im использует прописку, но это не выходит идеально.

Кроме того, у меня должен быть текст ниже моего контента Div, иначе мой нижний колонтитул будет ползти вверх, это тоже раздражает... Я пробовал кучу разных настроек div и класса, но я еще не нашел правильные настройки

html и css находятся здесь: http://hascomp.net/

проблемные области:

HTML

<div id="content"> 

  <p class="contentleftcol" >
  <img src="frontend/laptop-computer_repairs.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  Windows OS computer repairs and tune ups: remove not needed software slowing the computer down
  </p>

  <p class="contentleftcol" >
  <img src="frontend/wifi.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  wifi configuration and optimisation
  </p>

  <p class="contentleftcol" >
  <img src="frontend/anti_spyware.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  virus and spyware removal
  </p>

  <p class="contentleftcol" >
  <img src="frontend/computer_upgrades.gif" width="150" height="150" alt="computer repairs image" />
  </p>
  <p class="contentrightcol">
  computer upgrades
  </p>
  </div>

CSS

#content{
    padding:0 0 24px 24px;
}
.contentleftcol{
    float:left;
    width:150px;
    padding-left:50px;
    height:150px;



}
.contentrightcol{
    float:right;
    width:760px;
    padding-top:68px;
    padding-bottom:70px;
}

благодарю!

user2905606 25 окт. 2013, в 11:15

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Mihey Egoroff · Answer 1 · 2013-10-25T06-35-00.000Z

Во-первых, я бы рекомендовал вам обернуть изображение и текст (contentleftcol и contentrightcol) в один div, div.row (например). Затем добавьте некоторое clearfix для предотвращения проблем с высотой. Это также поможет вам в дальнейшей разработке для небольших экранов.

    .row:after{
      content: "";
      display: table;
      clear: both; 
    }

После этого вы можете реализовать все, что Hive7 сказал или прочитал об этом больше:

Hive7 · Answer 2 · 2013-10-25T06-06-00.000Z

Способ вертикального выравнивания текста может быть выполнен несколькими способами, хотя наиболее эффективным является этот:

В родительском добавить:

display: table;

Затем по тексту, который вы хотите добавить в центр, добавьте:

display: table-cell;
vertical-align: middle;

ИЛИ

В родительском добавить:

position: relative;

Затем по тексту, который вы хотите добавить в центр, добавьте:

position: absolute;
top: 50%;
margin-top: -(width/2)

спасибо, я попробовал это, но мне не повезло ни с одним ... для опции таблицы, кажется, вам нужно использовать высоту строки: 309px; вариант, но я хочу использовать несколько строк ..., так что я думаю, я просто буду использовать padding-top. Что касается второго варианта, я думаю, что это работает только для divs, и я использую классы, чтобы я мог иметь кратные ...