Фото слайдер

@xragexx · Регистрация: 24.06.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, помогите пожалуйста разобраться - у меня файл со слайд шоу. Код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div align=center>
 
<div class="flex-container">
 
    <div class="flexslider">
        
        <ul class="slides" >
        
            <li >
                <a href="#"><img src="img/slide1.jpg" /> </a>
            </li>
            
                        
            <li>
                <img src="img/slide2.jpg" /> fgf
                
            </li>
        
            
            <li>
                <img src="img/slide3.jpg" />
            </li>

И так сколько слайдов

Код JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
 
$(document).ready(function () {
 
    $('.flexslider').flexslider({
 
        animation: 'slide',
 
        controlsContainer: '.flexslider'
 
    });
 
});
 
</script>

И код CSS:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }
 
.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    
}
 
.flexslider a img { outline: none; border: none; }
 
.flexslider {
    margin: 0;
    padding: 0;
    
}
 
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    
}
 
.flexslider .slides img {
    width: 100%;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    
    
    
}
 
/* Clearfix for the .slides element */
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    
}
 
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
 
 
 
/* Theme Styles */
.flexslider {
    position: relative;
    zoom: 1;
    padding: 10px;
    background: #ffffff;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    
}
 
/* Edit it if you want */
.flex-container {
    min-width: 150px;
    max-width: 620px;
    
}

Задача в том, что бы выровнять картинки в слайдах - вертикально - по центру, высота самого слайд шоу, как я понял берется - от самой большой высоты картинки.

Во вложениях 1 картинка - сама маленькая по высоте картинка, и видно, что она вертикально прижата к верху.
2 картинка - на ней самое большое по высоте фото, походу оно задет, высоту всего самого слайд шоу.
Хотелось бы выровнять картинки по вертикале - по центру.
Помогите пожалуйста.

@killlfun · 25.06.2014, 00:18

xragexx,

CSS
1
2
3
4
5
img {
   position: absolute;
   left: 50%;
   top: 50%;
}

Добавлено через 11 минут
Блин написал бред, сожги, сотри из памяти и никому не рассказывай

Вот:

CSS
1
2
3
4
img {
display:inline-block; 
vertical-align:middle;
}

@xragexx · 25.06.2014, 09:07 **[ТС]**

killlfun, пробовал так, не получается

Добавлено через 34 секунды
killlfun, пробовал так, не получается

mixenik · 25.06.2014, 11:12

попробуйте в стиль .flexslider добавить display: table-cell; vertical-align: middle;

@onlineman · 25.06.2014, 12:22

Может поможет код выравнивания слоя по вертикали по центру внутри другого слоя.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        #container {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #container > div {
            vertical-align: middle;
            display: inline-block;
        }
    </style>
</head>
    <body>
    <div id="container" align="center">
        <div style="width: 200px; height: 200px; background-color: black;"></div>
        <div style="width: 0px; height: 100%;"></div>
    </div>
    </body>
</html>

mixenik · 25.06.2014, 12:25

onlineman, мой вариант должен делать то же самое, только короче

@s3t-shop · 30.06.2014, 16:09

Есть решение такой проблемы в плагине imgLiquid вот ссылка http://www.htmldrive.net/items... -container

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@xragexx 0 / 0 / 0 Регистрация: 24.06.2014 Сообщений: 20
	25.06.2014, 09:07 [ТС]
	killlfun, пробовал так, не получается Добавлено через 34 секунды killlfun, пробовал так, не получается 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	25.06.2014, 11:12
	попробуйте в стиль .flexslider добавить display: table-cell; vertical-align: middle; 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	25.06.2014, 12:25
	onlineman, мой вариант должен делать то же самое, только короче 0

@s3t-shop 5 / 5 / 3 Регистрация: 22.06.2014 Сообщений: 23
	30.06.2014, 16:09
	Есть решение такой проблемы в плагине imgLiquid вот ссылка http://www.htmldrive.net/items... -container 0