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

@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";
});

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 SDL3_mixer - это библиотека я для воспроизведения аудио. Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и. . .	Установка 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 полиномов. . .

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

Решение

Решение

Решение

@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