-1

Wondering how to centre the images with their titles properly in CSS and have them remain centred with responsive screen sizes. I tried to add a margin-left to shift the titles over under the icons but I don't think that's good practice or a good method to use. Is their anything more effective that's proper practice for centring items together?

<style>
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir.eot?#iefix') format('embedded-opentype'),  url('../fonts/Avenir.woff') format('woff'), url('../fonts/Avenir.ttf')  format('truetype'), url('../fonts/Avenir.svg#Avenir') format('svg');
}
  
  
/* Component Needs */
 .pc-tab > input, .pc-tab section > div {
     display: none;
}
 #tab1:checked ~ section .tab1, #tab2:checked ~ section .tab2, #tab3:checked ~ section .tab3 {
     display: block;
}
 #tab1:checked ~ nav .tab1, #tab2:checked ~ nav .tab2, #tab3:checked ~ nav .tab3 {
     color: red;
}
/* Visual Styles */
 *, *:after, *:before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
  
  .container1{width:50px;
  height:50px;}
  
  .icon{
    width:100%;
    height:auto;
    text-align:center;
    margin-left:6px;
  }
  
 body {
     -webkit-font-smoothing: antialiased;
     background: #ffffff;
     font-family: "avenir";
}
 .pc-tab {
     width: 100%;
     max-width: 700px;
     margin: 0 auto;
}
 .pc-tab ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 .pc-tab ul li label {
     font-family: "Avenir";
     float: left;
     padding: 15px 35px;
     background: #ffffff;
     color: #000000;
   text-align:center;
}
 .pc-tab ul li label:hover {
     background: #ddd;
}
 .pc-tab ul li label:active {
     background: #fff;
}
 .pc-tab ul li:not(:last-child) label {
     border-right-width: 0;
}
 .pc-tab section {
     font-family: "Avenir";
     clear: both;
}
 .pc-tab section div {
     padding: 20px;
     width: 100%;
     background: #fff;
     line-height: 1.5em;
     letter-spacing: 0.3px;
     color: #444;
}
 .pc-tab section div h2 {
     margin: 0;
     font-family: "avenir";
     letter-spacing: 1px;
     color: #34495e;
}
 #tab1:checked ~ nav .tab1 label, #tab2:checked ~ nav .tab2 label, #tab3:checked ~ nav .tab3 label {
     background: white;
     color: #111;
     position: relative;
      font-weight:550;
   text-decoration:underline;
   text-align:center;
}
 #tab1:checked ~ nav .tab1 label:after, #tab2:checked ~ nav .tab2 label:after, #tab3:checked ~ nav .tab3 label:after {
     content: "";
     display: block;
     position: absolute;
     height: 2px;
     width: 100%;
     background: #fff;
     left: 0;
}
 
</style>







<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
  <nav>
    <ul>
      <li class="tab1">
        <label for="tab1">
          
          <div class="container1"><img class="icon" src="https://i.ibb.co/hdLph4F/Apps.png"/></div>
          
          <br/>First Tab</label>
      </li>
      
      
      
      <li class="tab2">
        <label for="tab2">
          <div class="container1">
          <img class="icon" src="https://i.ibb.co/3vjW33h/Web.png"/>
          </div>
          
          <br/>Second Tab</label>
      </li>
      
      
      <li class="tab3">
        <label for="tab3">
          
          <div class="container1">
          <img class="icon" src="https://i.ibb.co/xLXX2PF/Analytics.png"/>
          </div>
        
        
          <br/>Third Tab</label>
      </li>
    </ul>
  </nav>
  <section>
    <div class="tab1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    <div class="tab2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
    </div>
    <div class="tab3">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
  </section>
</div>
Cameron Cole
  • 410
  • 1
  • 4
  • 20

2 Answers2

1

Have you tried the following?

.stuff {
margin: 0 auto;
}
imstupidpleasehelp
  • 1,618
  • 2
  • 16
  • 36
0

You aren't really centering the text within the label, but rather centering the label within a parent container.

div {
  width: 300px;
  height: 300px;
  outline: 1px solid #000000;
}

label {
  /*
  need to set position to relative and display to block to use text align center
  */
  position: relative;
  display: block;
  text-align: center;
}

img {
  /*to center an image:*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
<div>
  <label>Text</label>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">
</div>
luek baja
  • 1,475
  • 8
  • 20