Question

我正在尝试对齐一个关于我的页面，我希望在容器的左边有一个图像，右边的文本以页面为中心对齐。这就是我所拥有的

<img link img>
<h2>
jack
</h2>
<p>
dummy text
</p>

https://jsfiddle.net/a0sozwjk/1/

＆＃13;

article#main-col {
  float: left;
  width: 65%;
}

.dark {
  padding: 15px;
  background: #35424a;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

article#main-col {
  float: left;
  width: 65%;
}

＆＃13;

<center>
  <Section id="main">
    <div class="container">
      <article id="main-About-Col">
        <h1 class="PTitle">About us</h1>
        <div class="dark">
          <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://thumb1.shutterstock.com/display_pic_with_logo/1000172/291874463/stock-vector-notebook-template-vector-example-of-using-hand-drawn-food-pattern-for-cover-of-cooking-book-291874463.jpg">
          <h2>
            Jack
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
            sem.
          </p>
        </div>
      </article>
    </div>
  </Section>
</center>

＆＃13;

Answer 1

使用display flex将图片设为垂直中心

https://jsfiddle.net/a0sozwjk/4/

＆＃13;

article#main-col {
  float: left;
  width: 65%;
}

.dark {
  padding: 15px;
  background: #35424a;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 250px;
}

.dark .imagediv{
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

article#main-col {
  float: left;
  width: 65%;
}

＆＃13;

<center>
  <Section id="main">
    <div class="container">
      <article id="main-About-Col">
        <h1 class="PTitle">About us</h1>
        <div class="dark">
          <div class="imagediv">
          <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://thumb1.shutterstock.com/display_pic_with_logo/1000172/291874463/stock-vector-notebook-template-vector-example-of-using-hand-drawn-food-pattern-for-cover-of-cooking-book-291874463.jpg">
          </div>
          <h2>
										Jack
									</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
            sem.
          </p>
        </div>
      </article>
    </div>
  </Section>
</center>

＆＃13;

Answer 2

我只是将元素放在flexbox中，将文本元素分组到同一个flex子元素中，然后使用align-items: center;！

它对你有用吗？

article#main-col {
  float: left;
  width: 65%;
}

.dark {
  padding: 15px;
  background: #35424a;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

article#main-col {
  float: left;
  width: 65%;
}

<center>
  <Section id="main">
    <div class="container">
      <article id="main-About-Col">
        <h1 class="PTitle">About us</h1>
        <div class="dark">
          <img style="float:left; vertical-align:center;" alt="Jack Picture" width="125px" src="https://thumb1.shutterstock.com/display_pic_with_logo/1000172/291874463/stock-vector-notebook-template-vector-example-of-using-hand-drawn-food-pattern-for-cover-of-cooking-book-291874463.jpg">
          <div>
          <h2>
            Jack
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
            sem.
          </p>
          </div>
        </div>
      </article>
    </div>
  </Section>
</center>

如果你还不知道有关flexbox的话，这是一张备忘单：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

只需将文字包装在div中，然后像https://jsfiddle.net/a0sozwjk/2/

一样添加overflow: hidden;

左侧图像，文本居中（页面）

3 个答案: