Я играл с 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;
}
благодарю!
Во-первых, я бы рекомендовал вам обернуть изображение и текст (contentleftcol и contentrightcol) в один div, div.row (например). Затем добавьте некоторое clearfix для предотвращения проблем с высотой. Это также поможет вам в дальнейшей разработке для небольших экранов.
.row:after{
content: "";
display: table;
clear: both;
}
После этого вы можете реализовать все, что Hive7 сказал или прочитал об этом больше:
Способ вертикального выравнивания текста может быть выполнен несколькими способами, хотя наиболее эффективным является этот:
В родительском добавить:
display: table;
Затем по тексту, который вы хотите добавить в центр, добавьте:
display: table-cell;
vertical-align: middle;
ИЛИ
В родительском добавить:
position: relative;
Затем по тексту, который вы хотите добавить в центр, добавьте:
position: absolute;
top: 50%;
margin-top: -(width/2)