Html/css Text Under Image

Below is the desired style: This is the jsfiddle link: here HTML:

• 

  Solution 1:

  Fiddle

  .photosulli {
    background: #999;
    display: inline;
    list-style: none;
    float: left;
    margin-right: 10px;
    padding: 0;
    text-align:center; 
    color: #fff;
  }
  

  or

  .photosulli {
    background: #fff;
    display: inline;
    list-style: none;
    float: left;
    margin-right: 10px;
    padding: 0;
    text-align:center; 
    color: #000;
  }
  

  Solution 2:

  You are assigning a white background to the .photos ul li span a, not the .photos ul li (the whole list item). If you want the list item to have a white background (or black as the image you showed suggests), you should assign a background-color:#000; to the .photos ul li.

  http://jsfiddle.net/gespinha/ZvUuy/11/

  If you change the body background to a different colour and apply a margin to the list items, to separate them, you will notice that it is then applied as you want.

  /* gallery display */body {
      background:#000;
  }
  .photos {
      display: block;
  }
  .photosul {
      list-style: none;
  }
  .photosulli {
      display: inline;
      list-style: none;
      float: left;
      padding: 010px00;
      text-align:center;
      background-color: #fff;
      margin:5px;
  }
  .photosullia {
      display: block;
      /*
    margin-right: 10px;
    margin-bottom: 7px; */opacity: 0.75;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      transition: all 0.3s linear;
  }
  .photosullia:hover {
      opacity: 1.0;
  }
  .photosulliaimg {
      border: 6px solid #e1d9ec;
  }
  

  Solution 3:

  Try this way maybe can help

  .photosulli {
      background:white;            
      list-style: none;
      float: left;
      margin:010px10px0;
      text-align:center; 
  }
  

  No need use display:inline because you always use float:left

  Solution 4:

  I assume you wanted the following:

  1. Black background in each block, you do that with: .photos ul li { background-color: #000; }

  2. White text, you should have: .photos ul li span { color: #fff; }

  3. White gaps, which can be done with: .photos ul li { margin: 10px; }

  In the end, you get this: http://jsfiddle.net/vZ8eD/1/

  /* gallery display */.photos {
    display: block;
  }
  
  .photosul {
    list-style: none;
  
  }
  
  .photosulli { 
      display: inline;
      list-style: none;
      float: left;
      padding: 20px;
      margin: 10px;
      text-align:center; 
      background-color: #000;    
  }
  
  .photosullispan {
      color: #fff;
  }
  
  .photosullia {
  
    display: block;
    /*
    margin-right: 10px;
    margin-bottom: 7px; */opacity: 0.75;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
  }
  .photosullia:hover {
    opacity: 1.0;
  }
  
  .photosulliaimg {
    border: 6px solid #e1d9ec;
  }
  

Share