ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Простая задача центрирования блока в непростом окружении
25 сообщений из 33, страница 1 из 2
  1  все
Простая задача центрирования блока в непростом окружении
    #38687411
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Имеется некое подобие меню с адаптивной вёрсткой (см.рисунок ниже):
 
Код: html
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.
80.
81.
82.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style>

.right{ float:right; }
.left{ float:left; }
.newline { clear: both; }

#wrapper {
    width: auto;
    height: auto;
    padding: 0;
    padding: 15px 0 15px 0;
    background: rgb(210,210,210);
}
.item {
    overflow: hidden;
    margin: 0 10px 0 0;
    padding: 0 0 0 0;
    width: 200px;         /* ВЫСОТА ПУНКТОВ МЕНЮ - УКАЗЫВАЕТСЯ И УЧИТЫВАЕТСЯ ТОЛЬКО ЗДЕСЬ */
    height: 100px;        /* ШИРИНА ПУНКТОВ МЕНЮ - УКАЗЫВАЕТСЯ И УЧИТЫВАЕТСЯ ТОЛЬКО ЗДЕСЬ */
}
.item > a {
    display: block;   /* чтобы можно было задать ширину и высоту ссылки */
    width: 100%;      /* ширина ссылки = ширине блока item, чтобы весь блок item был кликабельным */
    height: 100%;     /* высота ссылки = высоте блока item, чтобы весь блок item был кликабельным */    

    background: blue;    
    color: white;
    font-size: 12px;
    text-decoration: none;    
}
.item > a > div {
    padding: 5px;
    background: red;    
}
.subitem1 { margin: 0 8px 0 0; }  /* отступ после картинки */
.subitem2 { margin: 0 0 0 0; background: grey; }

</style>
</head>

<body>
<div id="wrapper" class="lcol">

    <div class="item left">
        <a href="/">
            <div class="left">  <!-- чтобы div-контейнер не занимал всю ширину родительского блока-ссылки -->
                <div class="subitem1 left"><img src="data:image/jpg;base64,/9j/4QCwRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAcAAAASgAAADIBAgAUAAAAZgAAABMCAwABAAAAAQAAAGmHBAABAAAAegAAAAAAAABBQ0QgU3lzdGVtcyBEaWdpdGFsIEltYWdpbmcAMjAxNDowNzowNCAwMzo1OToyMgADAJCSAgADAAAAMTUAAAKgBAABAAAADwAAAAOgBAABAAAADwAAAAAAAABL+AUA/8AAEQgADwAPAwEhAAIRAQMRAf/bAIQAAgEBAQEBAgEBAQICAgIDBQMDAgIDBgQEAwUHBgcHBwYHBggJCwkICAoIBgcKDQoKCwwMDQwHCQ4PDgwPCwwMDAEDAwMEAwQIBAQIEgwKDBISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhIS/8QAcQAAAwEAAAAAAAAAAAAAAAAABQYHCRAAAQMDBAIDAQAAAAAAAAAAAQIDBAUHEQAGEiEIIhMxQYEBAQEBAAAAAAAAAAAAAAAAAAUGBxEAAQMCBQMFAAAAAAAAAAAAAQIDBAARBRIhMUETgZEjMlGh8P/aAAwDAQACEQMRAD8A13sj4+bJr8+u3UuJAbqa5VUliNHmqJZZbQ6pJWpOcEkpP30AP7qQ+S1dtFVN3x0WcpEFiNGRxfqFMCm25LhKgUhPScJCR7Ad8v0as4D8mXiBAPpoFrcfH2dazbFYkODhSSpILrhvfne/gCw70W33ca821GNw2dhtNsQDUpZccbUguONOqKi1yOcJ9iesH2x+aQKZtOdV4BobG2nETi78rDzUhJS56nkhQUQAAASCO89fWkIiWGGuq0r3HMd/2nFEzlSpbwaeTfKMo1HbzzX/2Q=="></div>
                <div class="subitem2 left"><span>Надпись</span></div>
                <div class="newline"></div>  <!-- чтобы плавающие subitem1 и subitem2 не выходили за пределы родительского div (чтобы родительский div не имел нулевой высоты) (необязательно, если родительский div тоже плавающий) -->
            </div>
        </a>
    </div>
            
    <div class="item left">
        <a href="/">
            <div class="left">  <!-- чтобы div-контейнер не занимал всю ширину родительского блока-ссылки -->
                <div class="subitem1 left"><img src="data:image/jpg;base64,/9j/4QCwRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAcAAAASgAAADIBAgAUAAAAZgAAABMCAwABAAAAAQAAAGmHBAABAAAAegAAAAAAAABBQ0QgU3lzdGVtcyBEaWdpdGFsIEltYWdpbmcAMjAxNDowNzowNCAwMzo1OToyMgADAJCSAgADAAAAMTUAAAKgBAABAAAADwAAAAOgBAABAAAADwAAAAAAAABL+AUA/8AAEQgADwAPAwEhAAIRAQMRAf/bAIQAAgEBAQEBAgEBAQICAgIDBQMDAgIDBgQEAwUHBgcHBwYHBggJCwkICAoIBgcKDQoKCwwMDQwHCQ4PDgwPCwwMDAEDAwMEAwQIBAQIEgwKDBISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhIS/8QAcQAAAwEAAAAAAAAAAAAAAAAABQYHCRAAAQMDBAIDAQAAAAAAAAAAAQIDBAUHEQAGEiEIIhMxQYEBAQEBAAAAAAAAAAAAAAAAAAUGBxEAAQMCBQMFAAAAAAAAAAAAAQIDBAARBRIhMUETgZEjMlGh8P/aAAwDAQACEQMRAD8A13sj4+bJr8+u3UuJAbqa5VUliNHmqJZZbQ6pJWpOcEkpP30AP7qQ+S1dtFVN3x0WcpEFiNGRxfqFMCm25LhKgUhPScJCR7Ad8v0as4D8mXiBAPpoFrcfH2dazbFYkODhSSpILrhvfne/gCw70W33ca821GNw2dhtNsQDUpZccbUguONOqKi1yOcJ9iesH2x+aQKZtOdV4BobG2nETi78rDzUhJS56nkhQUQAAASCO89fWkIiWGGuq0r3HMd/2nFEzlSpbwaeTfKMo1HbzzX/2Q=="></div>
                <div class="subitem2 left"><span>Двустрочная<br>надпись</span></div>
                <div class="newline"></div>  <!-- чтобы плавающие subitem1 и subitem2 не выходили за пределы родительского div (чтобы родительский div не имел нулевой высоты) (необязательно, если родительский div тоже плавающий) -->
            </div>
        </a>
    </div>

    <div class="item left">
        <a href="/">
            <div class="left">  <!-- чтобы div-контейнер не занимал всю ширину родительского блока-ссылки -->
                <div class="subitem1 left"><img src="data:image/jpg;base64,/9j/4QCwRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAcAAAASgAAADIBAgAUAAAAZgAAABMCAwABAAAAAQAAAGmHBAABAAAAegAAAAAAAABBQ0QgU3lzdGVtcyBEaWdpdGFsIEltYWdpbmcAMjAxNDowNzowNCAwMzo1OToyMgADAJCSAgADAAAAMTUAAAKgBAABAAAADwAAAAOgBAABAAAADwAAAAAAAABL+AUA/8AAEQgADwAPAwEhAAIRAQMRAf/bAIQAAgEBAQEBAgEBAQICAgIDBQMDAgIDBgQEAwUHBgcHBwYHBggJCwkICAoIBgcKDQoKCwwMDQwHCQ4PDgwPCwwMDAEDAwMEAwQIBAQIEgwKDBISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhIS/8QAcQAAAwEAAAAAAAAAAAAAAAAABQYHCRAAAQMDBAIDAQAAAAAAAAAAAQIDBAUHEQAGEiEIIhMxQYEBAQEBAAAAAAAAAAAAAAAAAAUGBxEAAQMCBQMFAAAAAAAAAAAAAQIDBAARBRIhMUETgZEjMlGh8P/aAAwDAQACEQMRAD8A13sj4+bJr8+u3UuJAbqa5VUliNHmqJZZbQ6pJWpOcEkpP30AP7qQ+S1dtFVN3x0WcpEFiNGRxfqFMCm25LhKgUhPScJCR7Ad8v0as4D8mXiBAPpoFrcfH2dazbFYkODhSSpILrhvfne/gCw70W33ca821GNw2dhtNsQDUpZccbUguONOqKi1yOcJ9iesH2x+aQKZtOdV4BobG2nETi78rDzUhJS56nkhQUQAAASCO89fWkIiWGGuq0r3HMd/2nFEzlSpbwaeTfKMo1HbzzX/2Q=="></div>
                <div class="subitem2 left"><span>Ещё одна двустрочная<br>надпись</span></div>
                <div class="newline"></div>  <!-- чтобы плавающие subitem1 и subitem2 не выходили за пределы родительского div (чтобы родительский div не имел нулевой высоты) (необязательно, если родительский div тоже плавающий) -->
            </div>
        </a>
    </div>

    <div class="newline"></div>  <!-- чтобы wrapper не имел нулевой высоты, т.к. все его дочерние div'ы - плавающие -->

</div>
</body>

</html>

Задача:
1. Иконка должна быть центрирована с надписью по горизонтали
2. Красный блок должен быть ровно в центре синего блока
3. По возможности упростить html-код

Условия:
1. Никакой привязки к размерам красного и синего блоков (вёрстка адаптивная). Т.е. размеры блоков заранее неизвестны
2. Размеры иконок могут быть произвольными (к их размерам также не привязываться)
3. Иконка и надпись должны располагаться на одном постоянном расстоянии друг от друга
4. При изменении размера синего блока размер красного блока меняться не должен
5. Кликабельной ссылкой должен быть весь синий блок

Что касается центрирования блоков, то здесь сильно связывает руки тот факт, что практически все блоки приходится делать плавающими.
В этих условиях варианты с [display: inline] и [display: table-cell] не работают.

P.S. Весь вчерашний день (для меня ещё сегодняшний) потратил на это чудо-меню. Ниасилил...
...
Рейтинг: 0 / 0
04.07.2014, 04:51
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687495
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
аффтарЧто касается центрирования блоков, то здесь сильно связывает руки тот факт, что практически все блоки приходится делать плавающими.

Пригрозили пытать раскалённым железом, если позабудешь о float? inline-block и table-cell нормальный вариант.
...
Рейтинг: 0 / 0
04.07.2014, 09:26
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687613
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
st_stаффтарЧто касается центрирования блоков, то здесь сильно связывает руки тот факт, что практически все блоки приходится делать плавающими.

Пригрозили пытать раскалённым железом, если позабудешь о float? inline-block и table-cell нормальный вариант.

Если все так просто предложи рабочий вариант )
...
Рейтинг: 0 / 0
04.07.2014, 10:55
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687676
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Малыхин СергейЕсли все так просто предложи рабочий вариант )

Телепатией не обладаю. Иконка, которая центрирована по горизонтали хрен поймёшь от чего, толи внутри красного блока она вместе с текстом центрируется, хотя красный блок обжимает контент и нечего там центровать, толи красный блок относительно синего блока должен центрироваться по горизонтали, но тогда это перекликается с пунктом 2, где уже об этом сказано, короче про первый пункт вообще не понял. Второй пункт, как один блок отцентровать относительно другого - ну это все знают. Третий пункт - философский, видимо лишняя строка в html/css на что-то влияет. А вообще, картинка, и то, что надо сделать согласно пунктам - две разные вещи.

Такие вот дела
...
Рейтинг: 0 / 0
04.07.2014, 11:23
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687697
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
На самом деле задача не сложная =)
...
Рейтинг: 0 / 0
04.07.2014, 11:31
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687718
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Малыхин СергейНа самом деле задача не сложная =)

Если понимаешь, что хочет получить в итоге автор, а иначе это просто гадание.
...
Рейтинг: 0 / 0
04.07.2014, 11:41
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687742
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторТелепатией не обладаю. Иконка, которая центрирована по горизонтали хрен поймёшь от чего, толи внутри красного блока она вместе с текстом центрируется, хотя красный блок обжимает контент и нечего там центровать, толи красный блок относительно синего блока должен центрироваться по горизонтали, но тогда это перекликается с пунктом 2, где уже об этом сказано, короче про первый пункт вообще не понял.1. Иконка должна быть расположена не слева вверху красного блока, а слева в середине красного блока.
2. Красный блок должен быть расположен строго в середине синего блока (в середине по горизонтали и в середине по вертикали).

авторТретий пункт - философский, видимо лишняя строка в html/css на что-то влияет.Вообще-то в самом начале у меня было что-то вроде такого:
Код: html
1.
2.
3.
4.
5.
<ul class="wrapper">
    <li class="item"><a href="/">Надпись</a></li>
    <li class="item"><a href="/">Двустрочная</br>надпись</a></li>
    <li class="item"><a href="/">Ещё одна двустрочная</br>надпись</a></li>
</ul>


Ели сравнить этот html-код с тем, что приведён в моём первом посте, то станет понятно, что задача #3 имеет как раз-таки очевидное практическое значение.
...
Рейтинг: 0 / 0
04.07.2014, 11:53
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687763
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторА вообще, картинка, и то, что надо сделать согласно пунктам - две разные вещи.Картинка - это то, что у меня пока получилось сделать. Как должно быть:
1. Иконка должна быть расположена не слева вверху красного блока, а слева в середине красного блока.
2. Красный блок должен быть расположен строго в середине синего блока (в середине по горизонтали и в середине по вертикали).

авторНа самом деле задача не сложная =)Рад это услышать. Только вот я ожидал готового решения.
Если бы это было так просто, я бы не мудохался всю ночь.

авторВторой пункт, как один блок отцентровать относительно другого - ну это все знают...
Пригрозили пытать раскалённым железом, если позабудешь о float? inline-block и table-cell нормальный вариант. Повторюсь:
Что касается центрирования блоков, то здесь сильно связывает руки тот факт, что практически все блоки приходится делать плавающими. В этих условиях варианты с [display: inline] и [display: table-cell] не работают.

Вам известен способ реализовать задачу без float'ов ? Поделитесь знаниями с сообществом (без иронии, серьёзно). При этом обратите внимание на условие №2 .
...
Рейтинг: 0 / 0
04.07.2014, 12:02
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687792
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Вот что нужно получить:
...
Рейтинг: 0 / 0
04.07.2014, 12:15
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687968
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Я всё равно не въезжаю, вот как на рисунке . Высоту и ширину синих блоков задал от балды, она может быть любой. Иконку также можно заменить на img, если фоном не нравится.
...
Рейтинг: 0 / 0
04.07.2014, 13:58
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38687986
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
Cyrax_02,

Сделайте ваш пример на фиддле, больше людей найдется поковырять.
...
Рейтинг: 0 / 0
04.07.2014, 14:16
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688139
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
st_stЯ всё равно не въезжаю, вот как на рисунке . Высоту и ширину синих блоков задал от балды, она может быть любой.В Вашем промежуточном примере:

1. Для синего прямоугольника (ссылки) [display:inline-block;] нужен для того, чтобы:
- синие прямоугольники следовали друг за другом по горизонтали (свойство встроенного элемента)
- можно было задать горизонтальное выравнивание (text-align) красного прямоугольника внутри (свойство блочного элемента)
- в свойствах красного прямоугольника можно было задать вертикальное выравнивание красного прямоугольника в синем прямоугольнике (свойство блочного элемента)

2. Для красного прямоугольника [display:inline-block;] нужен для того, чтобы:
- красный прямоугольник не занимал всю ширину синего прямоугольника (свойство встроенного элемента)
- в свойствах дочерних span'ов можно было задать их вертикальное выравнивание внутри красного прямоугольника (свойство блочного элемента)

3. Для пустого span'а класса "valign", вертикально выравнивающего текст внутри красного прямоугольника, [display:inline-block;] нужен для того, чтобы:
- чтобы он был расположен справа от красного прямоугольника, а не на новой строке (свойство встроенного элемента)
- можно было задать ему высоту, равную высоте синего прямоугольника (свойство блочного элемента)

Примечательно то, что inline-block в данном примере будет работать даже в IE6/7, т.к. применяется он только к встроенным элементам (к ссылкам и span'ам)

st_stИконку также можно заменить на img, если фоном не нравится.
А фоном и не получится . Размер картинки в этом случае не будет участвовать в позиционировании надписи (красного прямоугольника).
...
Рейтинг: 0 / 0
04.07.2014, 16:19
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688142
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Вариант st_st :
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
.blue {
	background:blue;
	margin-right:10px;
	text-align:center;
	vertical-align:top;
	display:inline-block;
}
.red {
	color:#fff;
	background:red;
	vertical-align:middle;
	display:inline-block;
	padding:10px 10px 10px 25px;
	background:url(sqlru_icon.png) 5px 50% #f00 no-repeat;
}
.valign {
	width:0;
	height:100%;
	vertical-align:middle;
	display:inline-block;
}
</style>

</head>
<body>
	<a href="http://sql.ru/" class="blue" style="width:200px;height:200px;">
		<span class="red">1 строка</span><span class="valign"></span>
	</a>
	
	<a href="http://google.com/" class="blue" style="width:300px;height:400px;">
		<span class="red">1 строка<br>2 строка<br>3 строка<br>4 строка<br>5 строка</span><span class="valign"></span>
	</a>
</body>
</html>
...
Рейтинг: 0 / 0
04.07.2014, 16:20
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688144
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
Неужели так сложно сделать таблицу в таблице?
решение интуитивное и элементарное ))
Ну или псевдо таблицу на блоках
...
Рейтинг: 0 / 0
04.07.2014, 16:21
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688146
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторСделайте ваш пример на фиддле, больше людей найдется поковырять.
Не знаю, что это такое и не хочу знать...
...
Рейтинг: 0 / 0
04.07.2014, 16:21
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688153
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Малыхин СергейНеужели так сложно сделать таблицу в таблице?
решение интуитивное и элементарное ))
Ну или псевдо таблицу на блокахСогласно нашим локальным стандартам, предпочтение отдаётся блочной вёрстке как более гибкой. Сабж табличной вёрсткой реализовать можно, только при этом будет куча дополнительных тегов (table, tr, td и пр.), а также куча дополнительных CSS-стилей для них. Более того, при усложнении структуры меню легко можно упереться в потолок возможностей табличной вёрстки - в этом случае придётся переделывать структуру на блочный вариант.

А псевдо-таблица/псевдо-ячейки - не вариант, т.к. поддерживаются не всеми браузерами.
...
Рейтинг: 0 / 0
04.07.2014, 16:30
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688171
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Cyrax_02,

как задаётся высота синего блока?

Помню ещё давным давно видел такое вот решение (кстати, на будущее, это и есть тот самый fiddle... правда так обсуждать удобнее?)

Единственное ограничение - высоту внешнего блока надо знать заранее.

P.S. насчёт таблиц - это вы напридумывали... Какие такие ограничения табличной вёрстки? Какие стили для разных tr и td? Пишем таблице скласс, а в этом классе определяем tr и td с нужными стилями... и проблема решена.

По сути для такого решения многоуровневого меню надо всего 2 класса-селектора (внешняя и вложенная таблица), и ещё 4 для tr и td... И далее любая структура вкладывается в этот список элементов... ЛЮБАЯ :)
...
Рейтинг: 0 / 0
04.07.2014, 16:40
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688203
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Фоновую иконку можно убрать, впихнуть её в img и аналогично выровнять по вертикали. Если старые IE не интересуют, то вспомогательные спаны можно поубирать и добавить их через after, что ещё больше сократит html.

А ещё есть table-cell, но html увеличится и старые IE в пролёте (хотя многие уже забивают на них).

p.s. там ещё <title> добавить надо в пример, а то на html5 не валидируется, не солидно
...
Рейтинг: 0 / 0
04.07.2014, 16:56
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688207
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
И это, у того, кто знает сей факт (баг ранних IE и соответственно верстал под них, а значит не первый год в вебе) - аффтарПримечательно то, что inline-block в данном примере будет работать даже в IE6/7, т.к. применяется он только к встроенным элементам (к ссылкам и span'ам) обычно проблем с вёрсткой не возникает.
...
Рейтинг: 0 / 0
04.07.2014, 16:59
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688209
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
http://jsbin.com/dosiyopo/1/
...
Рейтинг: 0 / 0
04.07.2014, 16:59
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688251
Фотография Малыхин Сергей
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Малыхин Сергей
Участник
Cyrax_02Малыхин СергейНеужели так сложно сделать таблицу в таблице?
решение интуитивное и элементарное ))
Ну или псевдо таблицу на блокахСогласно нашим локальным стандартам, предпочтение отдаётся блочной вёрстке как более гибкой. Сабж табличной вёрсткой реализовать можно, только при этом будет куча дополнительных тегов (table, tr, td и пр.), а также куча дополнительных CSS-стилей для них. Более того, при усложнении структуры меню легко можно упереться в потолок возможностей табличной вёрстки - в этом случае придётся переделывать структуру на блочный вариант.

А псевдо-таблица/псевдо-ячейки - не вариант, т.к. поддерживаются не всеми браузерами.

... Мы тут столялры и плотники поэтому дрель не предлагать мы топорами будем дырки сверлить .... (шутка)
...
Рейтинг: 0 / 0
04.07.2014, 17:18
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688325
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторЕсли старые IE не интересуют, то вспомогательные спаны можно поубирать и добавить их через after, что ещё больше сократит html.Почему без вспомогательных span'ов (высота которых = высоте родительского блока) красный span выравнивается по верху ? Ведь у красных span'ов указывется [vertical-align: middle] .
...
Рейтинг: 0 / 0
04.07.2014, 18:23
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688330
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
И для чего красному span'у необходимо указывать [display: inline-block] ?
Изначально красный span - встроенный элемент. Какое блочное свойство этим правилом мы ему придаём ?

Без [display: inline-block] красную многострочную надпись неслабо колбасит...
...
Рейтинг: 0 / 0
04.07.2014, 18:30
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688356
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
st_st , задавая [text-align: center] синему прямоугольнику (ссылке), мы тем самым центрируем по горизонтали не только группу встроенных элементов внутри ссылки (иконка + надпись), но и каждый из этих элементов в отдельности. В частности, строки многострочной надписи тоже центрируются по горизонтали, а должны центрироваться по левому краю.

Т.е. сам красный прямоугольник должен центрироваться по горизонтали, а многострочная надпись в составе красного прямоугольника - по левому краю. Возможно это сделать без усложнения html-кода ?

В jsfiddle.net нарисовал, только не знаю, как ссылку получить...
...
Рейтинг: 0 / 0
04.07.2014, 18:57
| Ответить | Цитировать | Написать  
Простая задача центрирования блока в непростом окружении
    #38688357
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Код: html
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.
<!DOCTYPE html>
<html>
<head>

<style>
.blue {
        background:blue;
        margin-right:10px;
        text-align:center;
        vertical-align:top;
        display:inline-block;
}
.red {
        color:#fff;
        background:red;
        vertical-align:middle;
        display:inline-block;
        padding:10px 10px 10px 25px;
        background:url(sqlru_icon.png) 5px 50% #f00 no-repeat;
}
.valign {
        width:0;
        height:100%;
        vertical-align:middle;
        display:inline-block;
}
</style>

</head>
<body>
        <a href="http://sql.ru/" class="blue" style="width:200px;height:200px;">
                <span class="red">1 строка</span><span class="valign"></span>
        </a>
        
        <a href="http://google.com/" class="blue" style="width:300px;height:400px;">
                <span class="red">1 строка<br>2 строка<br>3 строка<br>4 строка<br>5 строка длинная</span><span class="valign"></span>
        </a>
</body>
</html>
...
Рейтинг: 0 / 0
04.07.2014, 18:58
| Ответить | Цитировать | Написать  
25 сообщений из 33, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Простая задача центрирования блока в непростом окружении
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38687986&tid=1446929]:
 0ms
get settings:
 8ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 144ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 80ms
get tp. blocked users:
 1ms
others: 223ms
total:  493ms
созд. / загр.: 493ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]