Выровнять текст с помощью CSS - PullRequest
Новая
       16

Выровнять текст с помощью CSS

0 голосов
/ 22 сентября 2018

Как мне выровнять картинку с текстом?

Заранее большое спасибо 

<div class="w3-container" style="padding:128px 16px" id="about">
  <h1 class="w3-center w3-knallpink"><b>#about</b></h1>   
<div class="w3-row">
  <div class="w3-container w3-center w3-third">
    <img src="/bilder/Spongebob.png" alt="Bikini Bottom" style="width:100%;max-width:360px; margin-left: auto;
    margin-right: auto; border-radius: 3px;"> 
  </div>
  <div class="w3-container w3-twothird">
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
     TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
          </p>
</div></div> </div>

Screenshot

1 Ответ

0 голосов
/ 22 сентября 2018

Чтобы достичь ожидаемого результата, добавьте margin-top: 15px, так как текст абзаца имеет margin-top: 15px

для справки - https://codepen.io/nagasai/pen/dqLNNo

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container" style="padding:128px 16px" id="about">
  <h1 class="w3-center w3-knallpink"><b>#about</b></h1>   
<div class="w3-row">
  <div class="w3-container w3-center w3-third">
    <img src="https://tse2.mm.bing.net/th?id=OIP.MhyD6cHgUgRSnYMrQ8TomQHaGI&pid=15.1&P=0&w=183&h=153" alt="Bikini Bottom" style="width:100%;max-width:360px; margin-left: auto;
    margin-right: auto; border-radius: 3px;margin-top:15px"> 
  </div>
  <div class="w3-container w3-twothird">
      <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
     TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
          </p>
</div></div> </div>
...