How to put elements in the same line?

Asked

Viewed 329 times

-3

I’m trying to put some text and some small images on the same line, and leave the whole block centered on the screen.

I’ve tried to use float:left in everything, and stays in the same line, but then I can’t center in the middle of the screen.

<div id="parceiros">
    <p>Nossos parceiros:</p>
    <div id="logos-parceiros">
        <img src="./imagens_body/logo_aws.png">
        <img src="./imagens_body/logo_veesec.png">
        <img src="./imagens_body/logo_vindi.png">
        <img src="./imagens_body/logo_namecheap.png">
        <img src="./imagens_body/logo_forward.png">
        <img src="./imagens_body/logo_azure.png">
        <img src="./imagens_body/logo_encrypt.png">
    </div>
</div>

The idea was to stay on the same line and centralized:

Our partners: [logo1] [logo2] [logo3] ...

html css

  • Good afternoon. Where’s the CSS code? Your question needs more information to help. Click edit and put additional information so that we can help.

2 answers

-1


This happens because by default, the DIV element comes with the display: block; this causes the element to occupy a block, that is, the entire line. Playing any other content to the next line.

There are several ways you can leave everything in the same line. I really like using flexbox. But in some cases you can change the DIV display to inline instead of leaving as block.

I’ll give you a hint of how I would do it. In CSS add:

#parceiros{ 

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

If you want to see it working, I added a simple example in Fiddle: https://jsfiddle.net/j2htgo6q/9/

-3

Hello there, my darling. You can use the display: inline-block in id’s css "logos-partners"

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.