如何将图像与文本平行对齐？ [英] How do I align an image parallel to the text?

问题描述

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

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?

推荐答案

即使在HTML网站中，您也需要为元素提供足够的空间能够适应。否则，他们将继续从上到下堆叠自己。在你的情况下，问题是类似的（根据默认CSS;你没有显示任何CSS代码）。



我尝试过类似的案例。我添加了一些CSS属性来更改元素的宽度，将它们设置为可以容纳两个子元素的值。最后，将它们设置为内联显示。

Even in ab HTML web site, you need to provide enough space for the elements to be able to fit in. Otherwise, they will continue to stack themselves from top to bottom. In your case, the problem is similar (as per default CSS; you have not shown any CSS code).

I have tried a similar case as you are having. I added some CSS properties to change the width of elements, set them to a value that can hold both of the child element. Then finally, set them to display inline.

<!-- 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 。您可以在 http://jsfiddle.net/afzaal_ahmad_zeeshan/2hu1dk3w/ [ ^ ]。

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