如何将图像与文本平行对齐？

问题描述

我正在尝试将徽标与文本平行对齐，但我的代码无法正常工作。

I am trying to align a logo parallel to the text, but my code is not working properly.

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">

                    <p>Where some see a Wastewater Treatment Plant, Huber Technology envisions a Resource Recovery Center.</p>
            <div class="col-xs-6">
                 <img src="http://www.huber-technology.com/fileadmin/huber-template2013/www/img/logo-huber_hd.png">
              </div>
              </div>
            </div>
          </div>
        </div>
    </section>

任何人都可以指向正确的方向以使这些项目彼此平行对齐？

Can anyone point me in the right direction to align these items parallel to each other?

推荐答案

<!-- Sample HTML code; that ressembles your case -->
<div class="container">
    <p>Where some see a Wastewater Treatment Plant, Huber Technology envisions a Resource Recovery Center.</p>
    <div class="col-xs-6">
        <img src="https://www.google.com.pk/images/srpr/logo11w.png" />
    </div>
</div>

要在一个地方对齐段落和Google徽标，我使用了以下CSS代码，

To align the paragraph and the Google's logo in one place, I used the following CSS code,

// Container element should take 100% of space. 
.container {
    width: 100%;
}

// Display them in one line
.container p, .container div img {
    display: inline-block;
}

// Paragraph to left side
.container p {
    width: 60%;
    float: left;
}

// Image to the right
.container div img {
    width: 38%;
    float: right;
}
// You can change the floating positions to change the position of elements. 

内容排成一行;因为它们的宽度设置为其父级的百分比，并且显示设置为 inline-block 。您可以在 []。

这篇关于如何将图像与文本平行对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！