6 Replies - 545 Views - Last Post: 10 February 2017 - 01:55 AM

#1 Nonsense7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 22-October 14

Trying to center img in a floated UL

Posted 17 January 2017 - 11:03 PM

I have created an UL to display 4 images each with headings and a caption. I am trying to center the content within the LI. The text seems to center fine, but I cannot get the img to center. I have tried
align-content: center;
as well as
align-items: center;
neither seems to have any effect on the images. The images align left, unless I change the margin or padding. Is there a CSS declaration to center the img as well, or do I need to just measure out the pixels?

This is relevant HTML code
    
<h2>Meet The Team</h2>
   
<div id="team">
    
    <ul>
        <li>
            <h3>GANJA SESS</h3>
                <img src="GanjaSess.jpg" alt="Ganja Sess" title="Ganja">
                <p>DJ specializing in Reggae/Hip-Hop</p>
        </li>
        <li>
            <h3>SELECTA STYLZ</h3>
                <img src="Selectastylz.jpg" alt="Selecta Stylz" title="Stylz">
                <p>The "Vybez Gawd" hypeman/DJ</p>
        </li>
        <li>
            <h3>JONNY BLAZE</h3>
                <p>DJ specializing in Hip-Hop/Reggae</p>
        </li>
        <li>
            <h3>SCARFACE</h3>
                <img src="scarface.jpg" alt="Scarface" title="Scarface">
                <p>DJ specializing in Reggae/Hip-Hop</p>
        </li>
    
    </ul>
</div>
    



Relevant CSS Code
/*
**Div team,
*/
#team {
        margin: 0 auto;
}

/*
**Heading 2 for Div team,
*/
#team h2 {
            text-align: left;
}

/*
**Heading 3 for Div team, 
*/
#team h3    {
            text-align: center;
}

/*
**Unordered list in Div team, no bullets 
*/
#team ul {
            list-style-type: none;
            padding: 0;
            width: 1100px;
            margin: 0 auto;
}

/*
**List items in Div team,  
*/
#team ul li   {
                float: left;
                margin: 20px;
                align-items: center;
    
}

/*
**Images in list of Div team,
*/
#team ul li img {
                    
}





Is This A Good Question/Topic? 0
  • +

Replies To: Trying to center img in a floated UL

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,020
  • Joined: 08-June 10

Re: Trying to center img in a floated UL

Posted 18 January 2017 - 01:17 AM

Quote

neither seems to have any effect on the images.

that's because align-items and align-content are flexbox properties. but you don't have a flexbox there. why not trying the good old text-align?

This post has been edited by Dormilich: 18 January 2017 - 01:18 AM

Was This Post Helpful? 1
  • +
  • -

#3 Nonsense7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 22-October 14

Re: Trying to center img in a floated UL

Posted 18 January 2017 - 07:51 AM

I swore I tried that before, but I must've been putting in in the wrong selector on my style sheet.

Thanks.

This post has been edited by Dormilich: 18 January 2017 - 09:22 AM

Was This Post Helpful? 0
  • +
  • -

#4 BrS  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 07-December 16

Re: Trying to center img in a floated UL

Posted 07 February 2017 - 02:09 PM

Maybe
margin: 0 auto;
could work?
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,020
  • Joined: 08-June 10

Re: Trying to center img in a floated UL

Posted 08 February 2017 - 12:59 AM

unlikely.
Was This Post Helpful? 0
  • +
  • -

#6 Nonsense7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 22-October 14

Re: Trying to center img in a floated UL

Posted 09 February 2017 - 09:40 PM

Text-align worked, my selectors were messed up when I had originally tried it, which is why it didn't work before.

margin: 0 auto; did not work.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,020
  • Joined: 08-June 10

Re: Trying to center img in a floated UL

Posted 10 February 2017 - 01:55 AM

View PostNonsense7, on 10 February 2017 - 05:40 AM, said:

margin: 0 auto; did not work.

as I predicted. auto only means that the margin is distributed equally. this still holds true if the margin to distribute is 0.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1