CODEWITHSUNDEEP
htmlcss
Antonio
Antonio

Reputation: 395

Center three columns and center its content

I have got a list of eight items and I would like to center it in three columns as well as its content so that the words are aligned with respect first and second line. What's the best way to achieve it? I've tried with percent but the content still disaligned. 

body{
  margin: 0;
  padding: 0;
}
.wk_search-resume-list {
    width: 100%;
    overflow: auto;
}
.wk_search-resume-list li {
    margin-bottom: 16px;
    font-size: 14px;
    position: relative;
    width: 33%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
.wk_search-resume {
    background-color: white;
    border: 1px solid #bfbfbf;
    margin: 32px 16px;
    padding: 24px 24px 8px 24px;
    font-size: 0;
    position: relative;
}
.wk_search-resume-list strong {
    display: block;
}
.wk_search-resume-list.wk-interval {
    margin-top: 32px;
    border: 1px solid red;
  padding: 0;
}
<ul class="wk_search-resume-list wk-interval">    
            <li class="wk_search-resume-list--procedure">Tipo de procedimiento <strong>Procedimiento ordinario</strong></li>         
            <li class="wk_search-resume-list--subvoice">Subvoz <strong>Extinción y suspensión del arrendamiento</strong></li>            
            <li class="wk_search-resume-list--favor">A favor <strong>Arrendador</strong></li>  
            <li class="wk_search-resume-list--year">Año <strong>1992</strong></li>     
            <li class="wk_search-resume-list--resource">Tipo de recurso <strong>Procedimiento</strong></li>     
            <li class="wk_search-resume-list--against">En contra <strong>Arrendatario</strong></li>                           
            <li class="wk_search-resume-list--judgment">Sentido del fallo <strong>Arrendador</strong></li>
            <li class="wk_search-resume-list--judgment">Argumentos legales <strong>Crédito bancario</strong></li>           
          </ul>

Notes:

enter image description here

Upvotes: 0

Views: 53

Answers (2)

Antonio
Antonio

Reputation: 395

Finally, I achieved solve this with flexbox.

Container:

display: flex;
justify-content: space-around;
flex-wrap: wrap;

Content:

flex-grow: 1;
width: 33%;

Last-child of content (in order to position it on the left):

flex-grow: 80;

Upvotes: 0

Akin Hwan
Akin Hwan

Reputation: 627

I am still unclear on how you want to divide up the 8 items, but here is a rudimentary example showing what is possible with CSS Grid and Flexbox.

JS BIN example

ul{
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

Upvotes: 1

Related Questions