Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: text-align: justify;

Здравствуйте. Подскажите, возникла проблема, что в мобильной версии, хочу текст на всю ширину экрана сделать.
Но text-align: justify создает большие пробелы.

Кто какие способы знает, чтоб текст сделать на всю ширину без пробелов?
Ответ:
Кто какие способы знает, чтоб текст сделать на всю ширину без пробелов?
Указать интервал между буквами
Вопрос: Text-align: justify один код работает по разному

Имеется код, выравнивающий гориз-е меню с помощью text-align: justify.


По ссылкам этот код не минимизирован и по 2-й соответственно минимизирован.
Дело в том, что в 1-й ссылке код работает нормально, меню выровнено по горизонтали,
а по 2-й ссылке меню прижато влево, хоть и код один и тотже.
Проверьте пожалуйста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="head">
    <header class="header">
        <div class="wrap">
            <ul>
                <li><a href=#>7 причин купить у нас</a></li>
                <li><a href=#>О жилом комплексе</a></li>
                <li><a href=#>Планировка</a></li>
                <li><a href=#>Ипотека и рассрочка</a></li>
                <li><a href=#>Отзывы клиентов</a></li>
                <li><a href=#>Галерея</a></li>
                <li><a href=#>Контакты</a></li>
                <li class="last"></li>
            </ul>
            <div class="mobile-menu"><span></span></div>
        </div>
    </header>
</div>
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
.head .header ul {
    text-align: justify;
    font-size: 1px;
    line-height: 0;
    padding: 28px 0;
}
 
.head .header ul li {
    text-align: left;
    display: inline-block;
}
 
.head .header ul li a {
    font-size: 18px;
    letter-spacing: -.12px;
    color: #d9d9d9;
    line-height: 20px;
}
 
.head .header ul li.last {
    display: inline-block;
    width: 100%;
    height: 0;
    visibility: hidden;
}
Ответ: Сделайте пробелы между </li><li>
Вопрос: Почему не работает text-align: center?

В данном примере не работает стиль text-align: center для таблицы - таблица выравнивается по левому краю div.
Текст выравнивается как положено по центру.
Подскажите кто знает - по чему так происходит и как выровнять таблицу по центру?

<style>
div{text-align: center; width: 100%; border: 1px solid red;}
table{border: 1px solid green;}
td{background-color: yellow; width: 50px;}
</style>
<div>
тестовый текст
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
</div>
Ответ: shurik_shink, для таблицы:

display: inline-table;
Вопрос: атрибут "text-align" не работает- почему?

Слово- Фильм- не сдвигается вправо не понимаю почему. Подскажите.

Вот код

<html>
<head><title> Для тестов</title>

<meta charset="UTF-8">


</head>

<body>



<font style="text-align:right;color:blue"> фильм.</font><!-- цвет отображается а позиция вправо нет-->

</body>
</html>
Ответ: тег span
HTML5
1
<p style="text-align: right;">Lorem <span style="color:red;">ipsum</span> dolor sit amet, consectetur.</p>
Вопрос: Использование text-align:center для блочных элементов

Добрый день!
Иногда возникает потребность размещать блоки по центру, не задавая родителю фиксированной ширины.( то есть без использования margin :0 auto,и т.п),
А сами блоки имеют фиксированную ширину в пикселях. Свойства display: inline-block и text-align:center позволяет так сделать.
Например
Это очень удобно при адаптивной верстке (например фото-галлерея), все элементы автоматически выравниваются по центру и не надо использовать css media queries;
Смущает использование строчных стилей для блочных элементов: text-align:center для div, как то не очень...
Вопрос: есть ли альтернатива css стилей, которая позволяет задать подобное поведение элементов - центрование дочерних блоков с фиксированной шириной, где родительский блок не имеет фиксированной ширины?
Варианты которые не походят
1. { margin: 0 auto;position:relaive; } (т.к надо обязательно задать для родителя ширину )
2; {left:50%, margin-left:***fix elem_fidth**;position:absolute } (т.к надо обязательно знать ширину родителя )
Ответ:
а чем смущает использование строчных стилей для блочных?
Дело в том, что когда используешь что-то не по назначению, то получаешь какие-то мифические проблемы, решение которых занимает очень много времени и добавляет седых волос.
а использовать js для такой задачи только браузер грузить ненужными вычислениями
Если твоя целевая аудитория выходит в интернет с пентиума первого, то наверно не стоит.
Вопрос: Не работает text-align: center

Ребят, помогите пожалуйста. Никак не хочет работать свойство text-align: center. Нужно чтобы кнопки внутри меню были посередине относительно всего сайта, а сейчас они все выстраиваются слева. Помогите пожалуйста с этой проблемой. Заранее благодарю.
Вот весь код 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
@import url([url]http://fonts.googleapis.com/css?family=PT+Sans:300,400,700);[/url]
#cssmenu {
  background: #ffffff;
  margin: 0;
  width: 100%;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  font-family: 'PT Sans', sans-serif;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
}
#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #000000;
}
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  z-index: 1;
  top: 13px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 2;
  top: 15px;
  right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 300;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 170px;
  padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
  color: #ffffff;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #000000;
}
#cssmenu ul li ul li:hover > ul {
  left: 100%;
  top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul > li {
  float: none;
  display: block;
}
#cssmenu.align-center > ul {
  text-align: left;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
  right: 100%;
  left: auto;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}
#cssmenu > ul > li:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 0;
  background: #000000;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -ms-transition: height .2s;
  -o-transition: height .2s;
  transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
  display: block;
  content: "";
  background: #ffffff;
  height: 12px;
  width: 12px;
  position: absolute;
  border-radius: 13px;
  right: 14px;
  top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
  display: block;
  content: "";
  border: 4px solid transparent;
  border-top-color: #000000;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 16px;
  top: 21px;
}
#cssmenu > ul > li > a {
  color: #000000;
  padding: 15px 20px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align : center;
  font-size: 14px;
  z-index: 2;
  position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
  height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #ffffff;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
  background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
  border-top-color: #000000;
}
#cssmenu > ul > li:hover > ul {
  left: 0;
}
#cssmenu > ul > li:hover > ul > li {
  max-height: 72px;
  position: relative;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu > ul > li > a {
  display: block;
}
#cssmenu > ul > li {
  width: auto;
}
#cssmenu > ul > li > ul {
  width: 170px;
  display: block;
}
#cssmenu > ul > li > ul > li {
  width: 170px;
  display: block;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu > ul {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.35s ease-out;
  -moz-transition: max-height 0.35s ease-out;
  -ms-transition: max-height 0.35s ease-out;
  -o-transition: max-height 0.35s ease-out;
  transition: max-height 0.35s ease-out;
}
#cssmenu > ul > li > ul {
  width: 100%;
  display: block;
}
#cssmenu.align-right ul li a {
  text-align: left;
}
#cssmenu > ul > li > ul > li {
  width: 100%;
  display: block;
}
#cssmenu.align-right ul ul li a {
  text-align: left;
}
#cssmenu > ul > li > ul > li > a {
  width: 100%;
  display: block;
}
#cssmenu ul li ul li a {
  width: 100%;
}
#cssmenu.align-center > ul {
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: block;
}
#cssmenu > ul.open {
  max-height: 1000px;
  border-top: 1px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
  width: 100%;
}
#cssmenu ul > li {
  float: none;
  width: 100%;
}
#cssmenu ul li a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 20px;
}
#cssmenu ul > li:after {
  display: none;
}
#cssmenu ul li.has-sub > a:after,
#cssmenu ul li.has-sub > a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
  display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover > ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover > ul {
  left: 0;
  position: relative;
  right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover > ul > li {
  max-height: 999px;
  position: relative;
  background: none;
}
#cssmenu ul li ul li a {
  padding: 8px 20px 8px 35px;
  color: #ffffff;
}
#cssmenu ul li ul ul li a {
  padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover > a {
  color: #ffffff;
}
#cssmenu #menu-button {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 15px 20px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 1px;
  color: #ffffff;
  cursor: pointer;
}
#cssmenu #menu-button:after {
  display: block;
  content: '';
  position: absolute;
  height: 3px;
  width: 22px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  right: 20px;
  top: 16px;
}
#cssmenu #menu-button:before {
  display: block;
  content: '';
  position: absolute;
  height: 3px;
  width: 22px;
  border-top: 2px solid #ffffff;
  right: 20px;
  top: 26px;
}
Ответ: roman_1790, Вам только один совет... Упростите вёрстку меню... У Вас очень много лишних и разрозненных свойств... Приведите стили немного в божеский вид... И напоследок ещё одно замечание, проверяйте Ваше меню при редактировании в разных броузерах - боюсь Вас может ждать неприятный сюрприз... И да: под какую cms пишите менюху?
Вопрос: text-align глюк в хроме

Уже несколько раз сталкивался с данным глюком, думал что в новых версиях хрома будет что-то исправлено, но так ничего и не изменилось...

CODE (html):

  1. .content {
  2.         max-width: 650px;
  3.         text-align:center;
  4.         margin: 0 auto;
  5.         border: #110F0F thin solid;
  6.         overflow:hidden;
  7.        
  8. }
  9. .one {
  10.         width: 200px;
  11.         height: 200px;
  12.         display: inline-block;
  13.         margin-bottom: 5px;
  14.         border: #110F0F thin solid;
  15. }
  16.  
  17. <div class="content">
  18. <div class="one"></div>
  19. <div class="one"></div>
  20. <div class="one"></div>
  21. <div class="one"></div>
  22. <div class="one"></div>
  23. <div class="one"></div>
  24.  
  25. </div>
  26.  
  27.  
  28.  


вот что выдает хром, как видим 4-ый блок ушел вправо:


Нажмите для увеличения


далее, начинаем "резинить" и уже 5-ый блок уходит вправо


Нажмите для увеличения


во всех остальных браузерах все ровно.

Кто-то знает, как обойти данный глюк в хроме?
Ответ:
arimanecro пишет:
тогда почему во всех браузерах, кроме хрома, все ровно отображается? Значит проблема в хроме


Хром грустный браузер на самом деле... Фактически не оптимизирован по html5, я предпочитаю FireFox
Вопрос: Не работает text-align: center;

В данном примере не работает выравнивание по центру. Таблица выравнивается по левому краю div. Текст же выравнивается как положено по центру.
То есть проблема касается только таблицы

CODE (html):

  1. <style>
  2. div{text-align: center; width: 100%; border: 1px solid red;}
  3. table{border: 1px solid green; }
  4. td{background-color: yellow; width: 50px;}
  5. </style>
  6. <div>
  7. тестовый тект
  8. <table>
  9. <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  10. <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
  11. <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
  12. </table>
  13. </div>


Подскажите кто знает - почему так происходит и как выровнять таблицу по центру div?
Ответ:
VadiKO пишет:
margin: auto;

спасибо, работает
Вопрос: Почему не восстанавливается text-align

Интересует только теоретическая часть, решение "проблемы" достигается простым присвоением style.textAlign='center'
HTML5
1
2
3
<div>
    <h1 class="h1Class">just text</h1>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
.h1Class{
    color:#ED0F13;
    background-color:#F5F5F5;
    font-size:36px;
    text-align:center;  
    text-transform:uppercase;
}
div{
    color:#35F10F;
    background-color:#E9D3F0;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function cancelClass() {
    document.querySelector("div h1").onclick = function() {
        if ( document.querySelector("div h1").className == "h1Class") {
             document.querySelector("div h1").className = "";
             document.querySelector("div h1").style.textAlign='right';
        } else {
           document.querySelector("div h1").className = "h1Class";
        }
    };
}
 
window.onload =  function() {
    cancelClass();
};
После повторного присвоения класса h1Class, остается textAlign='right' ??
Вес у них одинаковый, обращение через имя тега и там и и там или изнасилованное присвоение style.textAlign не через класс имеет более высокий приоритет?
Ответ: скрипт пишет в html, и firebug его показывает. После изменения стилей скриптом у Н1 должен появиться атрибут style, где и прописан ваш стиль.
И к классу этот стиль никакого отношения не миеет
Вопрос: Text-align:left; хроме и лисе

HTML5
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>child</title>
<style>
 
p[align="justify"]{
    font: 15px Georgia, Times, serif;
    width: 40em;
    color: #F8090D;
    background-color:#93ECE0;
}
 
:first-child{
    color:#F50BF4;
    text-align:center;
    font-size:20px; 
}
 
:last-child{
    font-size:36px;
    text-align:right;
    color:#0273FB;
 
}
div{    
    text-align:left;
}
 
</style>
</head>
 
<body>
<section>
<p>test</p>
<p align="justify">Well then, proceed with your answers, and let me have the remainder of my repast. For we have already shown that the just are clearly wiser and better and abler than the unjust, and that the unjust are incapable of common action; nay ing at more, that to speak as we did of men who are evil acting at any time vigorously together, is not strictly true, for if they had been perfectly evil, they would have laid hands upon one another; but it is evident that there must have been some remnant of justice in them, which enabled them to combine; if there had not been they would have injured one another as well as their victims; they were but half --villains in their enterprises; for had they been whole villains, and utterly unjust, they would have been utterly incapable of action. That, as I believe, is the truth of the matter, and not what you said at first. But whether the just have a better and happier life than the unjust is a further question which we also proposed to consider. I think that they have, and for the reasons which to have given; but still I should like to examine further, for no light matter is at stake, nothing less than the rule of human life. Well then, proceed with your answers, and let me have the remainder of my repast. For we have already shown that the just are clearly wiser and better and abler than the unjust, and that the unjust are incapable of common action; nay ing at more, that to speak as we did of men who are evil acting at any time vigorously together, is not strictly true, for if they had been perfectly evil, they would have laid hands upon one another; but it is evident that there must have been some remnant of justice in them, which enabled them to combine; if there had not been they would have injured one another as well as their victims; they were but half --villains in their enterprises; for had they been whole villains, and utterly unjust, they would have been utterly incapable of action. That, as I believe, is the truth of the matter, and not what you said
<p>test</p>
</section>
<div>
<input type="text" value="1231"><br>
<input type="text" value="1232"><br>
<input type="text" value="1233">
</div>
</body>
</html>
В , в
Почему такая разница?

P.S. Текст в p align="justify" взят из сети только для примера работы child
Ответ: Линки на скриншоты почему-то не срабатывают
Добавил: 1 - FF, 2 -chrome