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

Question

我正在尝试将一个关于我的页面对齐，在该页面中我想在容器的左侧放置一个图像，在右侧将文本对齐到该页面的中心。 这就是我所拥有的

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

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

 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%; } 

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

Answer 1

使用display flex使图像成为垂直中心

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

 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%; } 

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

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中并添加overflow: hidden; 像这样https://jsfiddle.net/a0sozwjk/2/