html - 如何将图像与多个段落居中

Question

我在这方面已经有一段时间了，除了使用网格或 Flexbox 之外，我还没有真正找到明确的解决方法，我在一栏中有一个图像，在另一栏中有一个段落，尽管这肯定不是最好的方法它，是吗？理想情况下，我想要实现的是让我的图像和段落死在中间，图像在左边，段落在右边。我也尝试过使用 float ，但这让我无处可去，我最接近我想要的结果是使用 Flexbox，尽管通过使用 flexbox 图像不会随着屏幕尺寸缩小，所以我正在寻找另一种解决方案或寻找某人更有见识的来帮助我。我在网上看了看，有些人提出使用 span 而不是 paragraph，这是一个很好的解决方案，常见的做法吗？

    h3 {
    font-family: 'Raleway';
    font-weight: 700;
    color: #979b9e;

    }

    .wrapper {
    background-color: black;
    margin-top: 5%;
    text-align: left;
    }

    .aboutme {
    float: left;
    background-size: cover;
    height: auto;
    width: 5%;
    display: block;
    }

    p {
    color: #000;
    display: inline-block;
    font-family: 'Raleway';
    font-weight: 400;
    color: #979b9e;
    text-align: left;
    font-size: 1em;
    float: right;

    }

     <div class="wrapper">
            <img class="aboutme" src="img/aboutme.jpg">
            <h3>x</h3>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
        </div>

Answer 1

Flexbox 无疑是布局内容的一种干净替代方案。只需设置一个具有 display:flex 值的父元素(出于学习目的，我将“wrapper”更改为“row”)。如果您打算使用网格系统，则直接子级可以具有预定义的宽度。

.row {
  display: flex;
  background-color: #f1f1f1;
}

.col-3 { width: 25%; }
.col-9 { width: 75%; }

.aboutme {
  max-width: 100%;
}

h3 {
  font-family: 'Raleway';
  font-weight: 700;
  margin: 0;
  color: #979b9e;
}

p {
  color: #000;
  margin: 0;
  display: block;
  font-family: 'Raleway';
  font-weight: 400;
}

<div class="row">
  <div class="col-3">
    <img class="aboutme" src="https://via.placeholder.com/100">
  </div>
  <div class="col-9">
    <h3>Title</h3>
    <p>Paragraph</p>
  </div>
</div>