Как в HTML установить положение текста и изображения? 

Здравствуйте! Как можно изменить расположение изображения "Brusher_logo" так, чтобы оно находилось на одной линии с "goroda_logo", а текст "Города" был выровнен на одной строке с текстом "города"? Прилагаю код: <br/> <pre><code class="html">&lt;div style="text-align:left;"&gt; &lt;img src="Goroda logo.png" alt="goroda_logo" width="200px"&gt; &lt;/div&gt;
        &lt;p style=" font-family:russo one;font-size: 30px;"&gt;&lt;b&gt;Города&lt;/b&gt;&lt;/p&gt;
        &lt;div style="text-align:center;"&gt; &lt;img src="brusher_logo.png" alt="brusher_logo" width="200px"&gt; &lt;/div&gt;
        &lt;p style=" text-align: center; font-family:russo one;font-size: 30px;"&gt;&lt;b&gt;Brusher&lt;/b&gt;&lt;/p&gt;</code></pre>
  • 3 января 2025 г. 16:03
Ответы на вопрос 1 
Чтобы расположить изображения `Brusher_logo` и `goroda_logo` на одной линии, а текст "Города" выровнять на одной строке с текстом "Brusher", можно использовать стиль CSS `display: flex;`. Flexbox позволяет удобно управлять расположением элементов в строке. Ниже приведен пример, как это можно сделать в вашем коде:

```html
<div style="display: flex; align-items: center; justify-content: space-between;">
    <div style="text-align: left;">
        <img src="Goroda logo.png" alt="goroda_logo" width="200px">
    </div>
    <p style="font-family: 'russo one'; font-size: 30px; margin: 0;">
        <b>Города</b>
    </p>
    <div style="text-align: center;">
        <img src="brusher_logo.png" alt="brusher_logo" width="200px">
    </div>
    <p style="text-align: center; font-family: 'russo one'; font-size: 30px; margin: 0;">
        <b>Brusher</b>
    </p>
</div>
```

### Объяснение кода:
1. **Flexbox**: Мы используем свойство `display: flex;` для родительского `div`, что позволяет разместить его дочерние элементы (изображения и текст) в строку.
2. **Свойство `align-items: center;`**: Это свойство выравнивает элементы по вертикали по центру.
3. **Свойство `justify-content: space-between;`**: Элементы будут распределены между началом и концом строки, при этом пространство между ними будет равно.
4. **`margin: 0;`**: Убираем отступы у параграфов, чтобы они были на одной линии с изображениями.

Таким образом, текст "Города" и "Brusher" будет выровнен по вертикали с изображениями, и все элементы окажутся на одной линии.
Похожие вопросы
    Показать ещё