Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 10, средняя оценка - 4.90
shilovec5377
29 / 54 / 12
Регистрация: 26.05.2011
Сообщений: 755
#1

2 картинки по центру - HTML, CSS

20.02.2013, 13:18. Просмотров 2365. Ответов 11
Метки нет (Все метки)

Всем привет.
помогите пж сделать 2 картинки по центру и что бы они стояли чуть ближе.
заранее благодарю.
http://www.cyberforum.ru/html/thread907733.html
0
Миниатюры
2 картинки по центру  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.02.2013, 13:18
Я подобрал для вас темы с готовыми решениями и ответами на вопрос 2 картинки по центру (HTML, CSS):

Выравнивание картинки (лого) по центру
Всем привет! попросили сделать лого на сайт, я его сделал, целый вечер изучал...

CSS картинка по центру картинки
echo'<div style="position:relative"><img src="/inc/img/logo/',$_GET,'.png">...

картинки по центру в опр. положении
Здравствуйте , как заставить картинки встать именно так ? В флексах не шарю ,...

Выравнивание картинки по центру <div>
Всем доброго времени суток! Вкратце: есть у меня &lt;div&gt;, который служит просто...

Выравнивание тексте по центру картинки
Добрый день, помогите ставить текст по центру относительно картинки, со сдвигом...

11
shilovec5377
29 / 54 / 12
Регистрация: 26.05.2011
Сообщений: 755
20.02.2013, 13:19  [ТС] #2
мой код:
HTML5
1
2
<img src="http://s019.***********/i637/1302/09/4a949fee26b7.png" width="100" height="100" hspace="100" vspace="7" align="center">
<img src="http://i051.***********/1302/a8/4d3f73bbc73d.png"      width="100" height="100" hspace="100" vspace="0" align="center">
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
20.02.2013, 13:45 #3
ну дак:
hspace="100" - это отступы от элемента по горизонтали.... уберите их или сделайте минимальными. Сейчас у вас у каждой картинки стоит атрибут "отступ по горизонтали слева и справа от элемента 100 пикселей".
0
shilovec5377
29 / 54 / 12
Регистрация: 26.05.2011
Сообщений: 755
20.02.2013, 17:46  [ТС] #4
Цитата Сообщение от Lovrentiy Посмотреть сообщение
уберите их или сделайте минимальными
Ставлю по 5 вообще скраю слева отображаются
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
20.02.2013, 18:10 #5
у вас чисто html? Используется ли какой нибудь контейнер в который помещаются данные картинки? div? span? Если да, то каков размер? Если автоматический, то они и будет их жать к краю, поставьте тогда ширину во весь экран или фиксированную чтобы центр был по центру, либо в ручную укажите координаты контейнеру.
0
koza4ok
626 / 435 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
21.02.2013, 00:12 #6
HTML5
1
2
3
4
<div class="wrapper">
    <div class="F">FFF</div>
        <div class="F">AAAAdddddddddddAA</div>
</div >
CSS
1
2
.wrapper{height:100px;background:red;text-align:center;font-size:0;}
.F{display:inline-block;font-size:14px; background:green;height:100px;}

http://jsfiddle.net/KMtWW/3/
0
sheila
47 / 47 / 6
Регистрация: 10.05.2012
Сообщений: 236
21.02.2013, 02:08 #7
Выравнивать лучше в стилях. Социальные кнопки как правило делают спрайтами.
Код для выравнивания кнопок с помощью спрайта
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<section class="widget">
<ul class="social-icons">
<li class="twitter""><a href="">Twitter</a></li>        
<li class="facebook"><a href="">Facebook</a></li>
<li class="google-plus"><a href="">Google Plus</a></li>
<li class="youtube"><a href="">Youtube</a></li>
<li class="deviant"><a href="">Deviant</a></li>     
<li class="rss"><a href="">RSS</a></li>
</ul>
</section> 
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.widget {
  width:300px;
  display:block;
  margin:0 auto;
}
ul.social-icons li {
    width: 32px;
    float: left;
    margin: 0 10px 0 0;
}
ul.social-icons li a { 
    background: transparent 
        url('http://codezona.com/wp-content/themes/xo/images/social_icons.png') 
        no-repeat 0 0;
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
}
ul.social-icons li a:hover {
    opacity: 0.8;
}
ul.social-icons li.facebook a {
    background-position: -32px 0;
}
ul.social-icons li.google-plus a {
    background-position: -64px 0;
}
ul.social-icons li.youtube a {
    background-position: -96px 0;
}
 
ul.social-icons li.deviant a {
    background-position: -128px 0;
}
 
ul.social-icons li.rss a {
    background-position: -160px 0;
}
 
section.widget ul {
    font-size: 1.4em;
}
section.widget ul li {
    margin-bottom: 10px;
}


Посмотреть вживую
второй вариант - сверстать списком с помощью
CSS
1
display:inline-block;
0
shilovec5377
29 / 54 / 12
Регистрация: 26.05.2011
Сообщений: 755
21.02.2013, 12:36  [ТС] #8
Доло в том, что я не использую CSS-код.

Как можно просто в HTML-файде выровнять 2 картинки по центру.
0
koza4ok
626 / 435 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
21.02.2013, 13:11 #9
Цитата Сообщение от shilovec5377 Посмотреть сообщение
Доло в том, что я не использую CSS-код.
анекдот дня.
Это как?
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
21.02.2013, 16:30 #10
Используй тег <div> и уже центруй его:

HTML5
1
2
3
4
<div align="center">
<img src="http://s019.***********/i637/1302/09/4a949fee26b7.png" width="100" height="100" hspace="5" vspace="7" align="center">
<img src="http://i051.***********/1302/a8/4d3f73bbc73d.png"      width="100" height="100" hspace="5" vspace="0" align="center">
</div>
0
shilovec5377
29 / 54 / 12
Регистрация: 26.05.2011
Сообщений: 755
21.02.2013, 16:42  [ТС] #11
Вот решил проблему
<table align=center border=0>
HTML5
1
2
3
4
5
6
<tr> 
<td><img src="URL адрес КАРТИНКИ"></td> 
<td> </td> 
<td><img src="URL адрес КАРТИНКИ"></td> 
</tr> 
</table>
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
21.02.2013, 20:47 #12
лучше див, поверьте на слово...
0
21.02.2013, 20:47
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.02.2013, 20:47
Привет! Вот еще темы с решениями:

Горизонтальное выравнивание картинки по центру
Я новичок в этом деле. Прошу помочь разобраться,если не сложно написать...

Текст и картинки по центру css/html
Всем привет ни как не могу полосочки и текст сделать по центру.. их можно...

Как выровнять строчные картинки по центру?
Не могу выровнять все картинки по центру, получается только как на картинке,...

Выравнивание картинки внутри div блока по центру
Ребята привет! Я верстаю сайт с помощью div, у меня весь сайт на div Как...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru