How CSS makes the block of adaptive width appear centered

  <Divclass= ' Footer '>            <ul>          <Li>Website Home</Li>          <Li>Company Recruitment</Li>          <Li>Contact Us</Li>          <Li>Instructor Recruitment</Li>      </ul>  </Div>

. Footer{width:100%;Height:100px;background:Black;position:fixed;Bottom:0;text-align:Center; }. Footer UL{Display:Inline-block;Color: White; }. Footer Li{Height:100px;Line-height:100px;float: Left;Margin-right:20px}

Add Text-align:center at the parent level; Although this property is only valid for inline elements, the block that needs to be centered is also set on Display:inline-block; This makes it possible to convert block-level elements into inline elements with block-level attributes, so that the text-align takes effect and the adaptive width is centered.

How CSS makes the block of adaptive width appear centered