使用 CSS 对齐文本答案

【问题标题】：Align text using CSS使用 CSS 对齐文本
【发布时间】：2018-09-23 05:06:29
【问题描述】：

如何将图片与文字对齐？

在此先感谢

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

【问题讨论】：

标签： css w3.css

【解决方案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>

【讨论】：