CODEWITHSUNDEEP
javascripthtmlcss
Kazura92
Kazura92

Reputation: 75

Centering images and text in a div

I have been having some trouble centering some items on my website. The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.

I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.

All help is appreciated

Upvotes: 0

Views: 51

Answers (2)

Thomas Rbt
Thomas Rbt

Reputation: 1538

A p tag is a block element, so the default width is 100%. This is why you have one element per line

#passphraseBilder {
    text-align: center;
    display: block;
}

#passphraseBilder p {
    display: inline-block;
}

Turn the p tag into inline or inline-block, and it will work ;-)

Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Try this:

#passphraseBilder {
   display:inline-block;
   width:100%;
}

Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.

Upvotes: 0

Related Questions