Выравнивание параграфа не выравнивая картинки внутри параграфа

@UseMuse · Регистрация: 11.01.2016

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

Приветы
Есть такая вот структура страницы.... их около 100 штук. И изменять их все руками тяжело будет.
Помогите пожалуйста выровнять текст по ширине (justify), таким образом чтобы картинка осталась по центру.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
p
{text-align: center !important;  }
 
</style>
<div>
            <p><img  src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br>
LAREM , è l’unico centro accademico di studi in materia di economia e management della Provincia di Gorizia.
Il Laboratorio ha l’obiettivo di creare punti di incontro tra l’Università e il territorio locale, con gli occhi ben aperti sull’Europa dei Paesi vicini.
Un’attività continuativa con interlocutori pubblici, enti, istituzioni, aziende e con gli studenti. Un’opportunità per avvicinare il mondo del lavoro, per sperimentare in prima persona – ma sempre con l’ausilio dei docenti e dei ricercatori – l’importanza delle relazioni pubbliche e della comunicazione aziendale. Un modo concreto per avvicinare oggi il mondo di domani.
Progetti di ricerca, consulenze, workshop e convegni, attività internazionali, tirocini e tesi: tutto questo è il LAREM. I suoi docenti e i collaboratori – con le singole esperienze e professionalità – offrono una visione quanto più ampia e diversificata del mondo delle aziende, della comunicazione aziendale e delle possibili interazioni con l’Università.
Tante opportunità, tutte uniche.
Informazioni e contatti
Direttore: Prof. Luca Brusati Centro Polifunzionale di Gorizia
Palazzo Alvarez, via A. Diaz,5
34170 Gorizia
Telefono: +39 0481 580 111
Fax: +39 0481 580 330</p>
        </div>

Добавлено через 1 час 49 минут
хелп

Добавлено через 1 час 5 минут
с помощью js это возможно реализовать??

@mrtoxas · 29.07.2017, 12:49

CSS
1
2
3
4
5
6
7
  p {
    text-align: justify;
  }
  p img {
    display: block;
    margin: 0 auto;
  }

@UseMuse · 29.07.2017, 12:57 **[ТС]**

mrtoxas, не когда изучать css вёрстку js... всё таки нужно с css начать изучение. Спасибо!

@mrtoxas · 29.07.2017, 13:29

Можно еще так попробовать:

CSS
1
2
3
4
5
6
p{
  display: flex;
  flex-direction:column;
  text-align:justify;
  align-items:center;
}

Правда, поддержка ie - начиная с 10й версии.

@UseMuse · 29.07.2017, 14:51 **[ТС]**

mrtoxas, очень хорошо, что вы написали про

Сообщение от mrtoxas

Правда, поддержка ie - начиная с 10й версии.

)

Добавлено через 2 минуты
mrtoxas, всё отлично... но есть один момент, когда картинка находится по центру блока, а текст короткий. Как сделать выравнивание текста по центру? А в тех случаях когда текста достаточно для блока, оставлять выравнивание по ширине

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  p {
    text-align: justify;
  }
  p img {
    display: block;
    margin: 0 auto;
  }
</style>
<div>
            <p><img  src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br>
короткий текст</p>
        </div>

Добавлено через 1 час 14 минут
гуру js, где же вы...

@TFullControl · 29.07.2017, 15:45

В соседней теме тот же вопрос, уже дали на него ответ.

@UseMuse · 29.07.2017, 17:49 **[ТС]**

TFullControl, Помоги пожалуйста)
у меня два тега p, в одном теге мало символов, в другом больше
Нужно чтобы для первого тега выравнивание было по центру
а для второго, где символов больше, по ширине

https://codepen.io/anon/pen/WErwJJ

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
<html lang="ru">
 
<head>
  <meta charset="utf-8" />
</head>
 
<body>
  <div class=div_block>
    <div>
      <div>
        <div>
          <div>
            <div>
              <p><img src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br> короткий текст</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  <div class=div_block>
    <div>
      <div>
        <div>
          <div>
            <div>
              <p><img src="https://www.google.ru/doodle4google/images/splashes/featured.png" alt="" width="400" height="200"><br> Длииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииныыыыыыыыыыыыыыыыыый текст</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
 .div_block p {
    text-align: justify;
  }
  p img {
    display: block;
    margin: 0 auto;
  }

JavaScript
1
2
3
4
5
6
window.onload=function(){
var n=50,// кол-во символов
str=$('.div_block p').text(), length=str.length;
if(length<n)
$('.div_block p').css('text-align','center'); 
else $('.div_block p').css('text-align','justify');}

@TFullControl · 29.07.2017, 18:32

JavaScript
1
2
3
4
5
6
7
8
var p = document.querySelectorAll(".div_block p");
for (var i=0; i<p.length; i++){
  if (p[i].innerHTML.lenght > 30){
      p[i].style.textAlign = "justify";
  } else {
    p[i].style.textAlign = "center";
  }
}

@mrtoxas · 29.07.2017, 19:12

Вот, накатал такое.

PHP/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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <style>
    p {
        line-height: 1.15;
        font-size: 16px;
    }
 
    p img {
        display: block;
        margin: 0 auto;
    }
    </style>
</head>
 
<body>
    <p><img src="http://cyberstatic.net/images/cyberforum_logo.png" alt=""> Lorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLo</p>
    <p><img src="http://cyberstatic.net/images/cyberforum_logo.png" alt=""> Lorem ipsum Lorem ipsum dolor </p>
    <p><img src="http://cyberstatic.net/images/cyberforum_logo.png" alt=""> Lorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLoLorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLoLorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLo</p>
    <script>
    var p = document.getElementsByTagName('p');
    [].forEach.call(p, function(elem) {
        var hasImg = elem.getElementsByTagName('img');
        var imgHeight = 0;
        if (!!hasImg) {
            [].forEach.call(hasImg, function(img) {
                imgHeight += parseInt(getComputedStyle(img).height)
            })
        }
        var lh = parseInt(getComputedStyle(elem).lineHeight);
        var h = parseInt(getComputedStyle(elem).height) - imgHeight;
        elem.style.textAlign = (lh >= h) ? 'center' : 'justify';
    })
    </script>
</body>
 
</html>

В современных браузерах работает. Но надо подключить normalize или покопаться какие стили влияют на правильное поведение. Ощущение костыльности решения присутствует в полной мере, но мало ли, может поможет, да и в данной задаче без костылей не обойтись.

@UseMuse · 29.07.2017, 22:01 **[ТС]**

mrtoxas, прошу прощения..., я упустил не маловажную деталь после каждого тега img идёт тег <br>.
При таком раскладе увы, не работает

HTML5
1
2
3
<p><img src="http://cyberstatic.net/images/cyberforum_logo.png" alt=""> <br>Lorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLo</p>
    <p><img src="http://cyberstatic.net/images/cyberforum_logo.png" alt=""> <br>Lorem ipsum Lorem ipsum dolor </p>
    <p><img src="http://cyberstatic.net/images/cyberforum_logo.png" alt=""> <br>Lorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLoLorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLoLorem ipsum Lorem ipsum dolor sit sum, ipsaLorem ipsum dotr;lker;ltk er;kte;lrtker ertlker;ltker;t erlkel;rtk erlkt e;rlkt ;lerkt ert;lker;ltke;rlt er;tlker;ltkert erltker;t ert;ker;tlkert er;tke;rtlor sit sum, ipsaLo</p>

@mrtoxas · 29.07.2017, 22:14

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var p = document.getElementsByTagName("p");
[].forEach.call(p, function(elem) {
  var hasImg = elem.getElementsByTagName("img"),
    imgHeight = 0,
    lh = parseInt(getComputedStyle(elem).lineHeight);
  if (hasImg) {
    [].forEach.call(hasImg, function(img) {
      imgHeight += parseInt(getComputedStyle(img).height) + lh;
    });
  }
  var h = parseInt(getComputedStyle(elem).height) - imgHeight;
  elem.style.textAlign = lh >= h ? "center" : "justify";
});

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

Выравнивание параграфа не выравнивая картинки внутри параграфа

Решение

Решение

Решение

@UseMuse 154 / 154 / 60 Регистрация: 11.01.2016 Сообщений: 1,325
	29.07.2017, 12:57 [ТС]
	mrtoxas, не когда изучать css вёрстку js... всё таки нужно с css начать изучение. Спасибо! 0

@TFullControl 500 / 346 / 200 Регистрация: 20.10.2016 Сообщений: 1,101
	29.07.2017, 15:45
	Сообщение было отмечено UseMuse как решение Решение В соседней теме тот же вопрос, уже дали на него ответ. 1