使用 CSS 对齐文本

Question

如何将图片与文字对齐？

非常感谢

<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>

Answer 1

为了达到预期效果，添加 margin-top:15px ，因为段落文本有 margin-top:15px

codepen 供参考 - 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>

使用 CSS 对齐文本

Align text using CSS

css

w3.css